
<!doctype html>
<html lang="zh" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="一个自己的知识库网站，包含内容主要是嵌入式和图像处理相关，也有部分杂项内容。">
      
      
      
        <link rel="canonical" href="https://github.com/snqx-lqh/wiki/%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/%E7%BC%96%E7%A8%8B%E6%9D%82%E8%AE%B0/QML%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/">
      
      
        <link rel="prev" href="../FreeRTOS%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/">
      
      
        <link rel="next" href="../gitbook%20%E6%93%8D%E4%BD%9C%E6%8C%87%E5%8D%97/">
      
      
      <link rel="icon" href="../../../assets/notebook.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.5">
    
    
      
        <title>QML基础入门 - LQH's Wiki</title>
      
    
    
      <link rel="stylesheet" href="../../../assets/stylesheets/main.8608ea7d.min.css">
      
        
        <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../../../stylesheets/my_scheme.css">
    
    <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  <link rel="stylesheet" href="../../../assets/stylesheets/custom.7c86dd97.min.css">

   <link href="../../../assets/stylesheets/glightbox.min.css" rel="stylesheet"/><style>
    html.glightbox-open { overflow: initial; height: 100%; }
    .gslide-title { margin-top: 0px; user-select: text; }
    .gslide-desc { color: #666; user-select: text; }
    .gslide-image img { background: white; }
    .gscrollbar-fixer { padding-right: 15px; }
    .gdesc-inner { font-size: 0.75rem; }
    body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
    body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
    body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}</style> <script src="../../../assets/javascripts/glightbox.min.js"></script></head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#qml" class="md-skip">
          跳转至
        </a>
      
    </div>
    <div data-md-component="announce">
      
        <aside class="md-banner">
          <div class="md-banner__inner md-grid md-typeset">
            
              <button class="md-banner__button md-icon" aria-label="不再显示此消息">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
              </button>
            
            
  For updates follow <strong>@squidfunk</strong> on
  <a rel="me" href="https://fosstodon.org/@squidfunk">
    <span class="twemoji mastodon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
    </span>
    <strong>Fosstodon</strong>
  </a>
  and
  <a href="https://x.com/squidfunk">
    <span class="twemoji twitter">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253"/></svg>
    </span>
    <strong>Twitter</strong>
  </a>

          </div>
          
            <script>var el=document.querySelector("[data-md-component=announce]");if(el){var content=el.querySelector(".md-typeset");__md_hash(content.innerHTML)===__md_get("__announce")&&(el.hidden=!0)}</script>
          
        </aside>
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="页眉">
    <a href="../../.." title="LQH&#39;s Wiki" class="md-header__button md-logo" aria-label="LQH's Wiki" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7V5h2V4a2 2 0 0 1 2-2h6v7l2.5-1.5L18 9V2h1c1.05 0 2 .95 2 2v16c0 1.05-.95 2-2 2H7c-1.05 0-2-.95-2-2v-1H3v-2h2v-4H3v-2h2V7zm4 4H5v2h2zm0-4V5H5v2zm0 12v-2H5v2z"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            LQH's Wiki
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              QML基础入门
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="Switch to light mode"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="Switch to dark mode"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="Switch to system preference"  type="radio" name="__palette" id="__palette_2">
    
      <label class="md-header__button md-icon" title="Switch to system preference" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="查找">
        
          <a href="javascript:void(0)" class="md-search__icon md-icon" title="分享" aria-label="分享" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
          </a>
        
        <button type="reset" class="md-search__icon md-icon" title="清空当前内容" aria-label="清空当前内容" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
        </button>
      </nav>
      
        <div class="md-search__suggest" data-md-component="search-suggest"></div>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            正在初始化搜索引擎
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/snqx-lqh/wiki" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
  </div>
  <div class="md-source__repository">
    snqx-lqh/wiki
  </div>
</a>
      </div>
    
  </nav>
  
    
      
<nav class="md-tabs" aria-label="标签" data-md-component="tabs">
  <div class="md-grid">
    <ul class="md-tabs__list">
      
        
  
  
  
    <li class="md-tabs__item">
      <a href="../../.." class="md-tabs__link">
        
  
    
  
  主页

      </a>
    </li>
  

      
        
  
  
  
    
    
      
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86/Jetson/01_Jetson%20TX2%20NX%20%E6%9D%BF%E5%AD%90%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE/" class="md-tabs__link">
          
  
    
  
  图像处理

        </a>
      </li>
    
  

    
  

      
        
  
  
    
  
  
    
    
      
  
  
    
  
  
    
    
      <li class="md-tabs__item md-tabs__item--active">
        <a href="../../ESP32%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/01.GPIO%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA/" class="md-tabs__link">
          
  
    
  
  嵌入式学习笔记

        </a>
      </li>
    
  

    
  

      
        
  
  
  
    
    
      
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../%E6%8A%98%E8%85%BE/Docker%E7%9B%B8%E5%85%B3/00.docker%E7%9A%84%E5%AE%89%E8%A3%85%E4%BB%A5%E5%8F%8A%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE%E4%BD%BF%E7%94%A8/" class="md-tabs__link">
          
  
    
  
  折腾

        </a>
      </li>
    
  

    
  

      
        
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../%E6%A0%91%E8%8E%93%E6%B4%BE%26%E5%9B%BD%E4%BA%A7%E6%B4%BE/%E6%A0%91%E8%8E%93%E6%B4%BE%E5%85%A5%E9%97%A8/" class="md-tabs__link">
          
  
    
  
  树莓派&国产派

        </a>
      </li>
    
  

      
        
  
  
  
    
    
      
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../%E9%A1%B9%E7%9B%AE%E8%AE%BE%E8%AE%A1/00.51/%E5%9F%BA%E4%BA%8E51%E5%8D%95%E7%89%87%E6%9C%BA%E7%9A%84%E6%8E%A7%E5%88%B6%E5%9B%9B%E7%BA%BF%E6%AD%A5%E8%BF%9B%E7%94%B5%E6%9C%BA%E4%BB%BF%E7%9C%9F%E8%AE%BE%E8%AE%A1/" class="md-tabs__link">
          
  
    
  
  项目设计

        </a>
      </li>
    
  

    
  

      
    </ul>
  </div>
</nav>
    
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


  


<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="导航栏" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../../.." title="LQH&#39;s Wiki" class="md-nav__button md-logo" aria-label="LQH's Wiki" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7V5h2V4a2 2 0 0 1 2-2h6v7l2.5-1.5L18 9V2h1c1.05 0 2 .95 2 2v16c0 1.05-.95 2-2 2H7c-1.05 0-2-.95-2-2v-1H3v-2h2v-4H3v-2h2V7zm4 4H5v2h2zm0-4V5H5v2zm0 12v-2H5v2z"/></svg>

    </a>
    LQH's Wiki
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/snqx-lqh/wiki" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
  </div>
  <div class="md-source__repository">
    snqx-lqh/wiki
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../.." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    主页
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    
  
  
    <a href="../../../%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86/Jetson/01_Jetson%20TX2%20NX%20%E6%9D%BF%E5%AD%90%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    图像处理
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

  

      
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
      
        
        
      
      
    
    
      
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
        
          
          <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
            
  
  <span class="md-ellipsis">
    嵌入式学习笔记
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            嵌入式学习笔记
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../ESP32%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/01.GPIO%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    ESP32开发笔记
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../FPGA/%E6%8C%89%E9%94%AE%E6%89%AB%E6%8F%8F/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    FPGA
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../Linux%E5%BA%94%E7%94%A8%E5%AD%A6%E4%B9%A0%E7%AF%87/Linux%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C%E7%AC%94%E8%AE%B0/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    Linux应用学习篇
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../Linux%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91%E7%AF%87/00.Uboot_Linux_rootfs/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    Linux驱动开发篇
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../STM32HAL%E5%BA%93%E8%AE%B0%E5%BD%95/00.%E6%96%B0%E5%BB%BA%E5%B7%A5%E7%A8%8B%E4%BB%A5%E5%8F%8AGPIO%E7%9A%84%E8%BE%93%E5%87%BA%E9%85%8D%E7%BD%AE/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    STM32HAL库记录
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../STM32%E6%A0%87%E5%87%86%E5%BA%93%E5%BC%80%E5%8F%91/01.GPIO%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    STM32标准库开发
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E7%9B%B8%E5%85%B3/Keil%E4%BD%BF%E7%94%A8%E7%9B%B8%E5%85%B3/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    环境配置相关
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

              
            
              
                
  
  
    
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_8" checked>
        
          
          <label class="md-nav__link" for="__nav_3_8" id="__nav_3_8_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    编程杂记
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_8_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_3_8">
            <span class="md-nav__icon md-icon"></span>
            编程杂记
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../C%E8%AF%AD%E8%A8%80%E7%BC%96%E7%A8%8B%E6%9D%82%E8%AE%B0/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    C语言编程杂记
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../FreeRTOS%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    FreeRTOS学习记录
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    QML基础入门
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    QML基础入门
    
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      可视和不可视元素
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      信号和槽操作
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      方法的建立
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#js" class="md-nav__link">
    <span class="md-ellipsis">
      导入js文件中的方法
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#xyz" class="md-nav__link">
    <span class="md-ellipsis">
      XYZ属性和动态表达式绑定
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      布局
    </span>
  </a>
  
    <nav class="md-nav" aria-label="布局">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      锚点布局
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    <span class="md-ellipsis">
      行列布局
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#flow" class="md-nav__link">
    <span class="md-ellipsis">
      Flow布局
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_7" class="md-nav__link">
    <span class="md-ellipsis">
      网格布局
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_8" class="md-nav__link">
    <span class="md-ellipsis">
      基本类型
    </span>
  </a>
  
    <nav class="md-nav" aria-label="基本类型">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_9" class="md-nav__link">
    <span class="md-ellipsis">
      初始化
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_10" class="md-nav__link">
    <span class="md-ellipsis">
      基本的数据类型、别名、子元素
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_11" class="md-nav__link">
    <span class="md-ellipsis">
      基础控件
    </span>
  </a>
  
    <nav class="md-nav" aria-label="基础控件">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#checkbox" class="md-nav__link">
    <span class="md-ellipsis">
      CheckBox
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#calendar" class="md-nav__link">
    <span class="md-ellipsis">
      Calendar
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#combobox" class="md-nav__link">
    <span class="md-ellipsis">
      ComboBox
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#applicationwindow" class="md-nav__link">
    <span class="md-ellipsis">
      ApplicationWindow
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_12" class="md-nav__link">
    <span class="md-ellipsis">
      附加属性
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#listview" class="md-nav__link">
    <span class="md-ellipsis">
      ListView
    </span>
  </a>
  
    <nav class="md-nav" aria-label="ListView">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_13" class="md-nav__link">
    <span class="md-ellipsis">
      基础生成
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_14" class="md-nav__link">
    <span class="md-ellipsis">
      封装颜色生成器
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_15" class="md-nav__link">
    <span class="md-ellipsis">
      添加组件
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#index" class="md-nav__link">
    <span class="md-ellipsis">
      Index的使用
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#listmodel" class="md-nav__link">
    <span class="md-ellipsis">
      ListModel
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#section" class="md-nav__link">
    <span class="md-ellipsis">
      section
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_16" class="md-nav__link">
    <span class="md-ellipsis">
      附加属性
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#timer" class="md-nav__link">
    <span class="md-ellipsis">
      Timer
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#component" class="md-nav__link">
    <span class="md-ellipsis">
      Component
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_17" class="md-nav__link">
    <span class="md-ellipsis">
      自定义一个控件
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#js_1" class="md-nav__link">
    <span class="md-ellipsis">
      JS异步加载（失败）
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#loader" class="md-nav__link">
    <span class="md-ellipsis">
      Loader
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#mousearea" class="md-nav__link">
    <span class="md-ellipsis">
      MouseArea
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#stackview" class="md-nav__link">
    <span class="md-ellipsis">
      StackView
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#stacklayout" class="md-nav__link">
    <span class="md-ellipsis">
      StackLayout
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#repeater" class="md-nav__link">
    <span class="md-ellipsis">
      Repeater中继器
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#swipeviewtabbar" class="md-nav__link">
    <span class="md-ellipsis">
      SwipeView和TabBar
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#button" class="md-nav__link">
    <span class="md-ellipsis">
      Button的用户自定义
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#state" class="md-nav__link">
    <span class="md-ellipsis">
      State状态
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_18" class="md-nav__link">
    <span class="md-ellipsis">
      状态机的实现
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_19" class="md-nav__link">
    <span class="md-ellipsis">
      对话框
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#behavior" class="md-nav__link">
    <span class="md-ellipsis">
      Behavior
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_20" class="md-nav__link">
    <span class="md-ellipsis">
      动画顺序执行和并行
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../gitbook%20%E6%93%8D%E4%BD%9C%E6%8C%87%E5%8D%97/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Gitbook 操作指南
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Git常用操作
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../lvgl%E6%90%AD%E5%BB%BA%E6%A8%A1%E6%8B%9F%E5%99%A8/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Lvgl搭建模拟器
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A%E7%9B%B8%E5%85%B3/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    文件注释相关
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../%E9%9F%A6%E4%B8%9C%E5%B1%B1%E8%B5%84%E6%96%99/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    韦东山资料
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../%E9%BB%91%E9%A9%ACJava%E5%85%A5%E9%97%A8%E5%9F%BA%E7%A1%80/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    黑马Java入门基础
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    
  
  
    <a href="../../../%E6%8A%98%E8%85%BE/Docker%E7%9B%B8%E5%85%B3/00.docker%E7%9A%84%E5%AE%89%E8%A3%85%E4%BB%A5%E5%8F%8A%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE%E4%BD%BF%E7%94%A8/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    折腾
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

  

      
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    <a href="../../../%E6%A0%91%E8%8E%93%E6%B4%BE%26%E5%9B%BD%E4%BA%A7%E6%B4%BE/%E6%A0%91%E8%8E%93%E6%B4%BE%E5%85%A5%E9%97%A8/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    树莓派&国产派
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

      
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
    
    
      
      
    
    
      
        
        
      
    
    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
      
        
  
  
    
  
  
    <a href="../../../%E9%A1%B9%E7%9B%AE%E8%AE%BE%E8%AE%A1/00.51/%E5%9F%BA%E4%BA%8E51%E5%8D%95%E7%89%87%E6%9C%BA%E7%9A%84%E6%8E%A7%E5%88%B6%E5%9B%9B%E7%BA%BF%E6%AD%A5%E8%BF%9B%E7%94%B5%E6%9C%BA%E4%BB%BF%E7%9C%9F%E8%AE%BE%E8%AE%A1/" class="md-nav__link">
      
  
  <span class="md-ellipsis">
    项目设计
    
  </span>
  

      
        <span class="md-nav__icon md-icon"></span>
      
    </a>
  

  

      
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      可视和不可视元素
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      信号和槽操作
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      方法的建立
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#js" class="md-nav__link">
    <span class="md-ellipsis">
      导入js文件中的方法
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#xyz" class="md-nav__link">
    <span class="md-ellipsis">
      XYZ属性和动态表达式绑定
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      布局
    </span>
  </a>
  
    <nav class="md-nav" aria-label="布局">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      锚点布局
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    <span class="md-ellipsis">
      行列布局
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#flow" class="md-nav__link">
    <span class="md-ellipsis">
      Flow布局
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_7" class="md-nav__link">
    <span class="md-ellipsis">
      网格布局
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_8" class="md-nav__link">
    <span class="md-ellipsis">
      基本类型
    </span>
  </a>
  
    <nav class="md-nav" aria-label="基本类型">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_9" class="md-nav__link">
    <span class="md-ellipsis">
      初始化
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_10" class="md-nav__link">
    <span class="md-ellipsis">
      基本的数据类型、别名、子元素
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_11" class="md-nav__link">
    <span class="md-ellipsis">
      基础控件
    </span>
  </a>
  
    <nav class="md-nav" aria-label="基础控件">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#checkbox" class="md-nav__link">
    <span class="md-ellipsis">
      CheckBox
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#calendar" class="md-nav__link">
    <span class="md-ellipsis">
      Calendar
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#combobox" class="md-nav__link">
    <span class="md-ellipsis">
      ComboBox
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#applicationwindow" class="md-nav__link">
    <span class="md-ellipsis">
      ApplicationWindow
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_12" class="md-nav__link">
    <span class="md-ellipsis">
      附加属性
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#listview" class="md-nav__link">
    <span class="md-ellipsis">
      ListView
    </span>
  </a>
  
    <nav class="md-nav" aria-label="ListView">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_13" class="md-nav__link">
    <span class="md-ellipsis">
      基础生成
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_14" class="md-nav__link">
    <span class="md-ellipsis">
      封装颜色生成器
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_15" class="md-nav__link">
    <span class="md-ellipsis">
      添加组件
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#index" class="md-nav__link">
    <span class="md-ellipsis">
      Index的使用
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#listmodel" class="md-nav__link">
    <span class="md-ellipsis">
      ListModel
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#section" class="md-nav__link">
    <span class="md-ellipsis">
      section
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_16" class="md-nav__link">
    <span class="md-ellipsis">
      附加属性
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#timer" class="md-nav__link">
    <span class="md-ellipsis">
      Timer
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#component" class="md-nav__link">
    <span class="md-ellipsis">
      Component
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_17" class="md-nav__link">
    <span class="md-ellipsis">
      自定义一个控件
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#js_1" class="md-nav__link">
    <span class="md-ellipsis">
      JS异步加载（失败）
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#loader" class="md-nav__link">
    <span class="md-ellipsis">
      Loader
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#mousearea" class="md-nav__link">
    <span class="md-ellipsis">
      MouseArea
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#stackview" class="md-nav__link">
    <span class="md-ellipsis">
      StackView
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#stacklayout" class="md-nav__link">
    <span class="md-ellipsis">
      StackLayout
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#repeater" class="md-nav__link">
    <span class="md-ellipsis">
      Repeater中继器
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#swipeviewtabbar" class="md-nav__link">
    <span class="md-ellipsis">
      SwipeView和TabBar
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#button" class="md-nav__link">
    <span class="md-ellipsis">
      Button的用户自定义
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#state" class="md-nav__link">
    <span class="md-ellipsis">
      State状态
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_18" class="md-nav__link">
    <span class="md-ellipsis">
      状态机的实现
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_19" class="md-nav__link">
    <span class="md-ellipsis">
      对话框
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#behavior" class="md-nav__link">
    <span class="md-ellipsis">
      Behavior
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_20" class="md-nav__link">
    <span class="md-ellipsis">
      动画顺序执行和并行
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



<p>以下笔记来自视频：<a href="https://www.bilibili.com/video/BV1Ay4y1W7xd/">https://www.bilibili.com/video/BV1Ay4y1W7xd/</a></p>
<h1 id="qml">QML常用组件<a class="headerlink" href="#qml" title="Permanent link">&para;</a></h1>
<p><a name="c0cb9ba0"></a></p>
<h2 id="_1">可视和不可视元素<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h2>
<p>不可视：如Column垂直分布器</p>
<p>可视：如Button、Label等元素</p>
<p>元素使用示例</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">btn</span>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;按钮&quot;</span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="p">}</span>
</span></code></pre></div>
<p>元素使用例程可查看手册搜索Qt Quick Controls QML Types</p>
<p><a name="c325c145"></a></p>
<h2 id="_2">信号和槽操作<a class="headerlink" href="#_2" title="Permanent link">&para;</a></h2>
<p>例如button，按键按下的槽函数，每个控件的元素改变也可以发出一个信号，有对应的槽处理函数。</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;click&quot;</span>
</span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a><span class="w">    </span><span class="c1">//元素改变时的槽处理函数</span>
</span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="w">    </span><span class="nx">onTextChanged</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;hello&quot;</span><span class="p">)</span>
</span><span id="__span-1-6"><a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-1-7"><a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a><span class="w">    </span><span class="c1">//按键按下时的槽处理函数</span>
</span><span id="__span-1-8"><a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-9"><a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;btn click&quot;</span><span class="p">)</span>
</span><span id="__span-1-10"><a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a><span class="w">        </span><span class="nx">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;hello&quot;</span>
</span><span id="__span-1-11"><a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-1-12"><a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="54fb675d"></a></p>
<h2 id="_3">方法的建立<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h2>
<p>建立方法，function无变量数据类型</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;click&quot;</span>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>
</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mf">12</span><span class="p">,</span><span class="mf">39</span><span class="p">))</span>
</span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-2-7"><a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a>
</span><span id="__span-2-8"><a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">add</span><span class="p">(</span><span class="nx">num1</span><span class="p">,</span><span class="nx">num2</span><span class="p">){</span>
</span><span id="__span-2-9"><a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">num1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">num2</span><span class="p">;</span>
</span><span id="__span-2-10"><a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-2-11"><a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="9f3df106"></a></p>
<h2 id="js">导入js文件中的方法<a class="headerlink" href="#js" title="Permanent link">&para;</a></h2>
<p>新建一个js文件,做一个类构造函数</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">OperatorNumber</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span>
</span><span id="__span-3-2"><a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="p">{</span>
</span><span id="__span-3-3"><a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">number</span><span class="p">;</span>
</span><span id="__span-3-4"><a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a>
</span><span id="__span-3-5"><a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a><span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">){</span>
</span><span id="__span-3-6"><a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">number</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">num</span><span class="p">;</span>
</span><span id="__span-3-7"><a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-3-8"><a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a>
</span><span id="__span-3-9"><a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">sub</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">){</span>
</span><span id="__span-3-10"><a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">number</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">num</span><span class="p">;</span>
</span><span id="__span-3-11"><a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-3-12"><a id="__codelineno-3-12" name="__codelineno-3-12" href="#__codelineno-3-12"></a><span class="p">}</span>
</span></code></pre></div>
<p>导入文件后，做一个简单的使用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;click&quot;</span>
</span><span id="__span-4-3"><a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a>
</span><span id="__span-4-4"><a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-4-5"><a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="w">        </span><span class="kd">let</span><span class="w"> </span><span class="nx">oper</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">BJ</span><span class="p">.</span><span class="nx">OperatorNumber</span><span class="p">(</span><span class="mf">888</span><span class="p">);</span>
</span><span id="__span-4-6"><a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a>
</span><span id="__span-4-7"><a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;add&#39;</span><span class="p">,</span><span class="nx">oper</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="mf">100</span><span class="p">))</span>
</span><span id="__span-4-8"><a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;sub&#39;</span><span class="p">,</span><span class="nx">oper</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="mf">100</span><span class="p">))</span>
</span><span id="__span-4-9"><a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-4-10"><a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="9518eb67"></a></p>
<h2 id="xyz">XYZ属性和动态表达式绑定<a class="headerlink" href="#xyz" title="Permanent link">&para;</a></h2>
<p>以父对象为参考的坐标偏移，Z越大图层越高</p>
<p>动态表达式可以随着初始配置元素的变化而变化。</p>
<p>测试鼠标带动Button动</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-5-3"><a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="w">    </span><span class="nx">drag</span><span class="p">.</span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">btn</span>
</span><span id="__span-5-4"><a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="5aefca55"></a></p>
<h2 id="_4">布局<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h2>
<p><a name="d6b66c56"></a></p>
<h3 id="_5">锚点布局<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h3>
<p>主要是anchors的使用。</p>
<p>先建立一个父对象，然后fill。然后该对象的子对象就可以根据父对象布局</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="nx">Item</span><span class="p">{</span>
</span><span id="__span-6-2"><a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-6-3"><a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a>
</span><span id="__span-6-4"><a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-6-5"><a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">top</span>
</span><span id="__span-6-6"><a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="w">        </span><span class="c1">//anchors.verticalCenter: parent.top</span>
</span><span id="__span-6-7"><a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-6-8"><a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-6-9"><a id="__codelineno-6-9" name="__codelineno-6-9" href="#__codelineno-6-9"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-6-10"><a id="__codelineno-6-10" name="__codelineno-6-10" href="#__codelineno-6-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-6-11"><a id="__codelineno-6-11" name="__codelineno-6-11" href="#__codelineno-6-11"></a><span class="p">}</span>
</span></code></pre></div>
<p>margin, border ,padding 布局实现</p>
<p><a class="glightbox" href="https://lqh-tc-1309688396.cos.ap-chongqing.myqcloud.com/img/image-20220519093029082.png#id=Afhs3&amp;originHeight=204&amp;originWidth=216&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;status=done&amp;style=none&amp;title=" data-type="image" data-width="auto" data-height="auto" data-desc-position="bottom"><img alt="" src="https://lqh-tc-1309688396.cos.ap-chongqing.myqcloud.com/img/image-20220519093029082.png#id=Afhs3&amp;originHeight=204&amp;originWidth=216&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;status=done&amp;style=none&amp;title=" /></a></p>
<p>主要是margin的使用,下面这个例子，主要是rect1实现了一个间隔，整体效果是一个顶部、左部、右部的效果</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="nx">Item</span><span class="p">{</span>
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-7-3"><a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a>
</span><span id="__span-7-4"><a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-7-5"><a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">rect1</span>
</span><span id="__span-7-6"><a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-7-7"><a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">topMargin</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-7-8"><a id="__codelineno-7-8" name="__codelineno-7-8" href="#__codelineno-7-8"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">leftMargin</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-7-9"><a id="__codelineno-7-9" name="__codelineno-7-9" href="#__codelineno-7-9"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-7-10"><a id="__codelineno-7-10" name="__codelineno-7-10" href="#__codelineno-7-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-7-11"><a id="__codelineno-7-11" name="__codelineno-7-11" href="#__codelineno-7-11"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-7-12"><a id="__codelineno-7-12" name="__codelineno-7-12" href="#__codelineno-7-12"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">rect2</span>
</span><span id="__span-7-13"><a id="__codelineno-7-13" name="__codelineno-7-13" href="#__codelineno-7-13"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">top</span>
</span><span id="__span-7-14"><a id="__codelineno-7-14" name="__codelineno-7-14" href="#__codelineno-7-14"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-7-15"><a id="__codelineno-7-15" name="__codelineno-7-15" href="#__codelineno-7-15"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-7-16"><a id="__codelineno-7-16" name="__codelineno-7-16" href="#__codelineno-7-16"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="nx">rect1</span><span class="p">.</span><span class="nx">anchors</span><span class="p">.</span><span class="nx">topMargin</span>
</span><span id="__span-7-17"><a id="__codelineno-7-17" name="__codelineno-7-17" href="#__codelineno-7-17"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;orange&#39;</span>
</span><span id="__span-7-18"><a id="__codelineno-7-18" name="__codelineno-7-18" href="#__codelineno-7-18"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-7-19"><a id="__codelineno-7-19" name="__codelineno-7-19" href="#__codelineno-7-19"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-7-20"><a id="__codelineno-7-20" name="__codelineno-7-20" href="#__codelineno-7-20"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">rect3</span>
</span><span id="__span-7-21"><a id="__codelineno-7-21" name="__codelineno-7-21" href="#__codelineno-7-21"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">rect2</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-7-22"><a id="__codelineno-7-22" name="__codelineno-7-22" href="#__codelineno-7-22"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-7-23"><a id="__codelineno-7-23" name="__codelineno-7-23" href="#__codelineno-7-23"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">rect1</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-7-24"><a id="__codelineno-7-24" name="__codelineno-7-24" href="#__codelineno-7-24"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-7-25"><a id="__codelineno-7-25" name="__codelineno-7-25" href="#__codelineno-7-25"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;green&#39;</span>
</span><span id="__span-7-26"><a id="__codelineno-7-26" name="__codelineno-7-26" href="#__codelineno-7-26"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-7-27"><a id="__codelineno-7-27" name="__codelineno-7-27" href="#__codelineno-7-27"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="4ad30198"></a></p>
<h3 id="_6">行列布局<a class="headerlink" href="#_6" title="Permanent link">&para;</a></h3>
<p>主要是Row和Column的使用，还有ColumnLayer和RowLayer的使用，大致差不多，Column会将元素进行垂直布局，Row会将元素水平布局</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="nx">Column</span><span class="p">{</span>
</span><span id="__span-8-2"><a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="w">    </span><span class="nx">RadioButton</span><span class="p">{</span>
</span><span id="__span-8-3"><a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a><span class="w">        </span><span class="nx">checked</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-8-4"><a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;第一项&#39;</span>
</span><span id="__span-8-5"><a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-8-6"><a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="w">        </span><span class="nx">RadioButton</span><span class="p">{</span>
</span><span id="__span-8-7"><a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;第二项&#39;</span>
</span><span id="__span-8-8"><a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-8-9"><a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a><span class="w">        </span><span class="nx">RadioButton</span><span class="p">{</span>
</span><span id="__span-8-10"><a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;第三项&#39;</span>
</span><span id="__span-8-11"><a id="__codelineno-8-11" name="__codelineno-8-11" href="#__codelineno-8-11"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-8-12"><a id="__codelineno-8-12" name="__codelineno-8-12" href="#__codelineno-8-12"></a><span class="p">}</span>
</span><span id="__span-8-13"><a id="__codelineno-8-13" name="__codelineno-8-13" href="#__codelineno-8-13"></a><span class="nx">Row</span><span class="p">{</span>
</span><span id="__span-8-14"><a id="__codelineno-8-14" name="__codelineno-8-14" href="#__codelineno-8-14"></a><span class="w">    </span><span class="nx">RadioButton</span><span class="p">{</span>
</span><span id="__span-8-15"><a id="__codelineno-8-15" name="__codelineno-8-15" href="#__codelineno-8-15"></a><span class="w">        </span><span class="nx">checked</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-8-16"><a id="__codelineno-8-16" name="__codelineno-8-16" href="#__codelineno-8-16"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;第一项&#39;</span>
</span><span id="__span-8-17"><a id="__codelineno-8-17" name="__codelineno-8-17" href="#__codelineno-8-17"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-8-18"><a id="__codelineno-8-18" name="__codelineno-8-18" href="#__codelineno-8-18"></a><span class="w">    </span><span class="nx">RadioButton</span><span class="p">{</span>
</span><span id="__span-8-19"><a id="__codelineno-8-19" name="__codelineno-8-19" href="#__codelineno-8-19"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;第二项&#39;</span>
</span><span id="__span-8-20"><a id="__codelineno-8-20" name="__codelineno-8-20" href="#__codelineno-8-20"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-8-21"><a id="__codelineno-8-21" name="__codelineno-8-21" href="#__codelineno-8-21"></a><span class="w">    </span><span class="nx">RadioButton</span><span class="p">{</span>
</span><span id="__span-8-22"><a id="__codelineno-8-22" name="__codelineno-8-22" href="#__codelineno-8-22"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;第三项&#39;</span>
</span><span id="__span-8-23"><a id="__codelineno-8-23" name="__codelineno-8-23" href="#__codelineno-8-23"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-8-24"><a id="__codelineno-8-24" name="__codelineno-8-24" href="#__codelineno-8-24"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="36751864"></a></p>
<h3 id="flow">Flow布局<a class="headerlink" href="#flow" title="Permanent link">&para;</a></h3>
<p>超过该布局设定区域后会自动换行，例如</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-9-1"><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="nx">Flow</span><span class="p">{</span>
</span><span id="__span-9-2"><a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-9-3"><a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-9-4"><a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a><span class="w">    </span><span class="c1">//            flow: Flow.TopToBottom</span>
</span><span id="__span-9-5"><a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a>
</span><span id="__span-9-6"><a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-9-7"><a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-9-8"><a id="__codelineno-9-8" name="__codelineno-9-8" href="#__codelineno-9-8"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="o">/</span><span class="mf">2</span>
</span><span id="__span-9-9"><a id="__codelineno-9-9" name="__codelineno-9-9" href="#__codelineno-9-9"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;orange&#39;</span>
</span><span id="__span-9-10"><a id="__codelineno-9-10" name="__codelineno-9-10" href="#__codelineno-9-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-9-11"><a id="__codelineno-9-11" name="__codelineno-9-11" href="#__codelineno-9-11"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-9-12"><a id="__codelineno-9-12" name="__codelineno-9-12" href="#__codelineno-9-12"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-9-13"><a id="__codelineno-9-13" name="__codelineno-9-13" href="#__codelineno-9-13"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="o">/</span><span class="mf">2</span>
</span><span id="__span-9-14"><a id="__codelineno-9-14" name="__codelineno-9-14" href="#__codelineno-9-14"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-9-15"><a id="__codelineno-9-15" name="__codelineno-9-15" href="#__codelineno-9-15"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-9-16"><a id="__codelineno-9-16" name="__codelineno-9-16" href="#__codelineno-9-16"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-9-17"><a id="__codelineno-9-17" name="__codelineno-9-17" href="#__codelineno-9-17"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-9-18"><a id="__codelineno-9-18" name="__codelineno-9-18" href="#__codelineno-9-18"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="o">/</span><span class="mf">2</span>
</span><span id="__span-9-19"><a id="__codelineno-9-19" name="__codelineno-9-19" href="#__codelineno-9-19"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;green&#39;</span>
</span><span id="__span-9-20"><a id="__codelineno-9-20" name="__codelineno-9-20" href="#__codelineno-9-20"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-9-21"><a id="__codelineno-9-21" name="__codelineno-9-21" href="#__codelineno-9-21"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="a8f71195"></a></p>
<h3 id="_7">网格布局<a class="headerlink" href="#_7" title="Permanent link">&para;</a></h3>
<p>Grid的使用，类似流布局</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-10-1"><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="nx">Grid</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-10-2"><a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">grid</span>
</span><span id="__span-10-3"><a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="w">    </span><span class="nx">columns</span><span class="o">:</span><span class="w"> </span><span class="mf">3</span><span class="w"> </span><span class="c1">//选择为3列</span>
</span><span id="__span-10-4"><a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a><span class="w">    </span><span class="nx">spacing</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="c1">//元素间间隔为2</span>
</span><span id="__span-10-5"><a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a>
</span><span id="__span-10-6"><a id="__codelineno-10-6" name="__codelineno-10-6" href="#__codelineno-10-6"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Three&quot;</span><span class="p">;</span><span class="w"> </span><span class="nx">font</span><span class="p">.</span><span class="nx">bold</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-7"><a id="__codelineno-10-7" name="__codelineno-10-7" href="#__codelineno-10-7"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;words&quot;</span><span class="p">;</span><span class="w"> </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;red&quot;</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-8"><a id="__codelineno-10-8" name="__codelineno-10-8" href="#__codelineno-10-8"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;in&quot;</span><span class="p">;</span><span class="w"> </span><span class="nx">font</span><span class="p">.</span><span class="nx">underline</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-9"><a id="__codelineno-10-9" name="__codelineno-10-9" href="#__codelineno-10-9"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;a&quot;</span><span class="p">;</span><span class="w"> </span><span class="nx">font</span><span class="p">.</span><span class="nx">pixelSize</span><span class="o">:</span><span class="w"> </span><span class="mf">20</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-10"><a id="__codelineno-10-10" name="__codelineno-10-10" href="#__codelineno-10-10"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;row&quot;</span><span class="p">;</span><span class="w"> </span><span class="nx">font</span><span class="p">.</span><span class="nx">strikeout</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-10-11"><a id="__codelineno-10-11" name="__codelineno-10-11" href="#__codelineno-10-11"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="5d961e79"></a></p>
<h2 id="_8">基本类型<a class="headerlink" href="#_8" title="Permanent link">&para;</a></h2>
<p><a name="2cb472ff"></a></p>
<h3 id="_9">初始化<a class="headerlink" href="#_9" title="Permanent link">&para;</a></h3>
<p>组件初始化运行</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-11-1"><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="p">{</span>
</span><span id="__span-11-2"><a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="w">    </span><span class="nx">parent</span><span class="p">.</span><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">width</span>
</span><span id="__span-11-3"><a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="173ec062"></a></p>
<h3 id="_10">基本的数据类型、别名、子元素<a class="headerlink" href="#_10" title="Permanent link">&para;</a></h3>
<p>bool、double、enumeration、int、list、real、string、url、var</p>
<p>基本使用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-12-1"><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="nx">property</span><span class="w"> </span><span class="kr">int</span><span class="w"> </span><span class="nx">number</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">width</span>
</span></code></pre></div>
<p>起别名,给一些对象起别名</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-13-1"><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="nx">property</span><span class="w"> </span><span class="nx">alias</span><span class="w"> </span><span class="nx">WindowWidth</span><span class="o">:</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">width</span>
</span></code></pre></div>
<p>子元素children，children只是可以读一级元素的参数</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-14-1"><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="nx">Column</span><span class="p">{</span>
</span><span id="__span-14-2"><a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">column</span>
</span><span id="__span-14-3"><a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-14-4"><a id="__codelineno-14-4" name="__codelineno-14-4" href="#__codelineno-14-4"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="nx">rect1</span>
</span><span id="__span-14-5"><a id="__codelineno-14-5" name="__codelineno-14-5" href="#__codelineno-14-5"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-14-6"><a id="__codelineno-14-6" name="__codelineno-14-6" href="#__codelineno-14-6"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-14-7"><a id="__codelineno-14-7" name="__codelineno-14-7" href="#__codelineno-14-7"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;black&#39;</span>
</span><span id="__span-14-8"><a id="__codelineno-14-8" name="__codelineno-14-8" href="#__codelineno-14-8"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-14-9"><a id="__codelineno-14-9" name="__codelineno-14-9" href="#__codelineno-14-9"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-14-10"><a id="__codelineno-14-10" name="__codelineno-14-10" href="#__codelineno-14-10"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="nx">rect2</span>
</span><span id="__span-14-11"><a id="__codelineno-14-11" name="__codelineno-14-11" href="#__codelineno-14-11"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-14-12"><a id="__codelineno-14-12" name="__codelineno-14-12" href="#__codelineno-14-12"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-14-13"><a id="__codelineno-14-13" name="__codelineno-14-13" href="#__codelineno-14-13"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;green&#39;</span>
</span><span id="__span-14-14"><a id="__codelineno-14-14" name="__codelineno-14-14" href="#__codelineno-14-14"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-14-15"><a id="__codelineno-14-15" name="__codelineno-14-15" href="#__codelineno-14-15"></a><span class="w">    </span><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-16"><a id="__codelineno-14-16" name="__codelineno-14-16" href="#__codelineno-14-16"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">column</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span>
</span><span id="__span-14-17"><a id="__codelineno-14-17" name="__codelineno-14-17" href="#__codelineno-14-17"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">column</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">color</span><span class="p">)</span>
</span><span id="__span-14-18"><a id="__codelineno-14-18" name="__codelineno-14-18" href="#__codelineno-14-18"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">column</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="mf">1</span><span class="p">].</span><span class="nx">width</span><span class="p">)</span>
</span><span id="__span-14-19"><a id="__codelineno-14-19" name="__codelineno-14-19" href="#__codelineno-14-19"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-14-20"><a id="__codelineno-14-20" name="__codelineno-14-20" href="#__codelineno-14-20"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="31dec312"></a></p>
<h2 id="_11">基础控件<a class="headerlink" href="#_11" title="Permanent link">&para;</a></h2>
<p><a name="CheckBox"></a></p>
<h3 id="checkbox">CheckBox<a class="headerlink" href="#checkbox" title="Permanent link">&para;</a></h3>
<p>基础使用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-15-1"><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="nx">CheckBox</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-15-2"><a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a><span class="w">    </span><span class="nx">checked</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-15-3"><a id="__codelineno-15-3" name="__codelineno-15-3" href="#__codelineno-15-3"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;First&quot;</span><span class="p">)</span>
</span><span id="__span-15-4"><a id="__codelineno-15-4" name="__codelineno-15-4" href="#__codelineno-15-4"></a><span class="w">    </span><span class="nx">onCheckedChanged</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-15-5"><a id="__codelineno-15-5" name="__codelineno-15-5" href="#__codelineno-15-5"></a><span class="w">        </span><span class="k">if</span><span class="p">(</span><span class="nx">checked</span><span class="p">)</span>
</span><span id="__span-15-6"><a id="__codelineno-15-6" name="__codelineno-15-6" href="#__codelineno-15-6"></a><span class="w">            </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;First&#39;</span><span class="p">)</span>
</span><span id="__span-15-7"><a id="__codelineno-15-7" name="__codelineno-15-7" href="#__codelineno-15-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-15-8"><a id="__codelineno-15-8" name="__codelineno-15-8" href="#__codelineno-15-8"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="Calendar"></a></p>
<h3 id="calendar">Calendar<a class="headerlink" href="#calendar" title="Permanent link">&para;</a></h3>
<p>该控件在QtQuick.Controls 1.4中所以需要import QtQuick.Controls 1.4 as Ctr1</p>
<p>基础使用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-16-1"><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="nx">Column</span><span class="p">{</span>
</span><span id="__span-16-2"><a id="__codelineno-16-2" name="__codelineno-16-2" href="#__codelineno-16-2"></a><span class="w">    </span><span class="nx">Ctr1</span><span class="p">.</span><span class="nx">Calendar</span><span class="p">{</span>
</span><span id="__span-16-3"><a id="__codelineno-16-3" name="__codelineno-16-3" href="#__codelineno-16-3"></a><span class="w">        </span><span class="nx">minimumDate</span><span class="o">:</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Data</span><span class="p">(</span><span class="mf">2017</span><span class="p">,</span><span class="mf">0</span><span class="p">,</span><span class="mf">1</span><span class="p">)</span>
</span><span id="__span-16-4"><a id="__codelineno-16-4" name="__codelineno-16-4" href="#__codelineno-16-4"></a><span class="w">        </span><span class="nx">maximumDate</span><span class="o">:</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Data</span><span class="p">()</span>
</span><span id="__span-16-5"><a id="__codelineno-16-5" name="__codelineno-16-5" href="#__codelineno-16-5"></a>
</span><span id="__span-16-6"><a id="__codelineno-16-6" name="__codelineno-16-6" href="#__codelineno-16-6"></a><span class="w">        </span><span class="nx">onSelectedDateChanged</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-16-7"><a id="__codelineno-16-7" name="__codelineno-16-7" href="#__codelineno-16-7"></a><span class="w">            </span><span class="kd">let</span><span class="w"> </span><span class="nx">strData</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Qt</span><span class="p">.</span><span class="nx">formatDateTime</span><span class="p">(</span><span class="nx">selectedDate</span><span class="p">,</span><span class="s2">&quot;yyyy-MM-dd hh:mm:ss&quot;</span><span class="p">)</span>
</span><span id="__span-16-8"><a id="__codelineno-16-8" name="__codelineno-16-8" href="#__codelineno-16-8"></a><span class="w">            </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">strData</span><span class="p">)</span>
</span><span id="__span-16-9"><a id="__codelineno-16-9" name="__codelineno-16-9" href="#__codelineno-16-9"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-16-10"><a id="__codelineno-16-10" name="__codelineno-16-10" href="#__codelineno-16-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-16-11"><a id="__codelineno-16-11" name="__codelineno-16-11" href="#__codelineno-16-11"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="ComboBox"></a></p>
<h3 id="combobox">ComboBox<a class="headerlink" href="#combobox" title="Permanent link">&para;</a></h3>
<p>当model文件为数组字符串类型时</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-17-1"><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="nx">ComboBox</span><span class="p">{</span>
</span><span id="__span-17-2"><a id="__codelineno-17-2" name="__codelineno-17-2" href="#__codelineno-17-2"></a><span class="w">   </span><span class="nx">id</span><span class="o">:</span><span class="nx">combo</span>
</span><span id="__span-17-3"><a id="__codelineno-17-3" name="__codelineno-17-3" href="#__codelineno-17-3"></a><span class="w">   </span><span class="nx">model</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;first&#39;</span><span class="p">,</span><span class="s1">&#39;second&#39;</span><span class="p">,</span><span class="s1">&#39;third&#39;</span><span class="p">]</span>
</span><span id="__span-17-4"><a id="__codelineno-17-4" name="__codelineno-17-4" href="#__codelineno-17-4"></a>
</span><span id="__span-17-5"><a id="__codelineno-17-5" name="__codelineno-17-5" href="#__codelineno-17-5"></a><span class="w">   </span><span class="nx">onActivated</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-17-6"><a id="__codelineno-17-6" name="__codelineno-17-6" href="#__codelineno-17-6"></a><span class="w">       </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span>
</span><span id="__span-17-7"><a id="__codelineno-17-7" name="__codelineno-17-7" href="#__codelineno-17-7"></a><span class="w">       </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">textAt</span><span class="p">(</span><span class="nx">index</span><span class="p">))</span>
</span><span id="__span-17-8"><a id="__codelineno-17-8" name="__codelineno-17-8" href="#__codelineno-17-8"></a><span class="w">       </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">model</span><span class="p">[</span><span class="nx">index</span><span class="p">])</span>
</span><span id="__span-17-9"><a id="__codelineno-17-9" name="__codelineno-17-9" href="#__codelineno-17-9"></a><span class="w">   </span><span class="p">}</span>
</span><span id="__span-17-10"><a id="__codelineno-17-10" name="__codelineno-17-10" href="#__codelineno-17-10"></a><span class="p">}</span>
</span></code></pre></div>
<p>当model文件为项目组时,ListModel建立一个组，ListElement就是具体的项目类型，注意加一个textRole确定Combo显示数据的类型</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-18-1"><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="nx">ComboBox</span><span class="p">{</span>
</span><span id="__span-18-2"><a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a><span class="w">   </span><span class="nx">id</span><span class="o">:</span><span class="nx">combo</span>
</span><span id="__span-18-3"><a id="__codelineno-18-3" name="__codelineno-18-3" href="#__codelineno-18-3"></a><span class="w">   </span><span class="nx">textRole</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;text&#39;</span>
</span><span id="__span-18-4"><a id="__codelineno-18-4" name="__codelineno-18-4" href="#__codelineno-18-4"></a><span class="w">   </span><span class="nx">model</span><span class="o">:</span><span class="w"> </span><span class="nx">ListModel</span><span class="p">{</span>
</span><span id="__span-18-5"><a id="__codelineno-18-5" name="__codelineno-18-5" href="#__codelineno-18-5"></a><span class="w">       </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-18-6"><a id="__codelineno-18-6" name="__codelineno-18-6" href="#__codelineno-18-6"></a><span class="w">           </span><span class="nx">text</span><span class="o">:</span><span class="s1">&#39;first&#39;</span>
</span><span id="__span-18-7"><a id="__codelineno-18-7" name="__codelineno-18-7" href="#__codelineno-18-7"></a><span class="w">           </span><span class="nx">value</span><span class="o">:</span><span class="mf">100</span>
</span><span id="__span-18-8"><a id="__codelineno-18-8" name="__codelineno-18-8" href="#__codelineno-18-8"></a><span class="w">       </span><span class="p">}</span>
</span><span id="__span-18-9"><a id="__codelineno-18-9" name="__codelineno-18-9" href="#__codelineno-18-9"></a><span class="w">       </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-18-10"><a id="__codelineno-18-10" name="__codelineno-18-10" href="#__codelineno-18-10"></a><span class="w">           </span><span class="nx">text</span><span class="o">:</span><span class="s1">&#39;second&#39;</span>
</span><span id="__span-18-11"><a id="__codelineno-18-11" name="__codelineno-18-11" href="#__codelineno-18-11"></a><span class="w">           </span><span class="nx">value</span><span class="o">:</span><span class="mf">200</span>
</span><span id="__span-18-12"><a id="__codelineno-18-12" name="__codelineno-18-12" href="#__codelineno-18-12"></a><span class="w">       </span><span class="p">}</span>
</span><span id="__span-18-13"><a id="__codelineno-18-13" name="__codelineno-18-13" href="#__codelineno-18-13"></a><span class="w">       </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-18-14"><a id="__codelineno-18-14" name="__codelineno-18-14" href="#__codelineno-18-14"></a><span class="w">           </span><span class="nx">text</span><span class="o">:</span><span class="s1">&#39;third&#39;</span>
</span><span id="__span-18-15"><a id="__codelineno-18-15" name="__codelineno-18-15" href="#__codelineno-18-15"></a><span class="w">           </span><span class="nx">value</span><span class="o">:</span><span class="mf">300</span>
</span><span id="__span-18-16"><a id="__codelineno-18-16" name="__codelineno-18-16" href="#__codelineno-18-16"></a><span class="w">       </span><span class="p">}</span>
</span><span id="__span-18-17"><a id="__codelineno-18-17" name="__codelineno-18-17" href="#__codelineno-18-17"></a><span class="w">   </span><span class="p">}</span>
</span><span id="__span-18-18"><a id="__codelineno-18-18" name="__codelineno-18-18" href="#__codelineno-18-18"></a>
</span><span id="__span-18-19"><a id="__codelineno-18-19" name="__codelineno-18-19" href="#__codelineno-18-19"></a><span class="w">   </span><span class="nx">onActivated</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-18-20"><a id="__codelineno-18-20" name="__codelineno-18-20" href="#__codelineno-18-20"></a><span class="w">       </span><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span>
</span><span id="__span-18-21"><a id="__codelineno-18-21" name="__codelineno-18-21" href="#__codelineno-18-21"></a><span class="w">       </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">text</span><span class="p">,</span><span class="nx">obj</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span>
</span><span id="__span-18-22"><a id="__codelineno-18-22" name="__codelineno-18-22" href="#__codelineno-18-22"></a><span class="w">   </span><span class="p">}</span>
</span><span id="__span-18-23"><a id="__codelineno-18-23" name="__codelineno-18-23" href="#__codelineno-18-23"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="ApplicationWindow"></a></p>
<h2 id="applicationwindow">ApplicationWindow<a class="headerlink" href="#applicationwindow" title="Permanent link">&para;</a></h2>
<p>该窗口主要包含四个常用空间，菜单栏、工具条、操作空间、状态栏</p>
<p>菜单栏简单使用，MenuSeparator为分割符，加上&amp;后会在名称最前面的那个字母加一个下划线,Ttiggered为点击该项后的功能</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-19-1"><a id="__codelineno-19-1" name="__codelineno-19-1" href="#__codelineno-19-1"></a><span class="nx">MenuBar</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-19-2"><a id="__codelineno-19-2" name="__codelineno-19-2" href="#__codelineno-19-2"></a><span class="w">    </span><span class="nx">Menu</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-19-3"><a id="__codelineno-19-3" name="__codelineno-19-3" href="#__codelineno-19-3"></a><span class="w">        </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;&amp;File&quot;</span><span class="p">)</span>
</span><span id="__span-19-4"><a id="__codelineno-19-4" name="__codelineno-19-4" href="#__codelineno-19-4"></a><span class="w">        </span><span class="nx">Action</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;&amp;New...&quot;</span><span class="p">)</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-19-5"><a id="__codelineno-19-5" name="__codelineno-19-5" href="#__codelineno-19-5"></a><span class="w">        </span><span class="nx">Action</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;&amp;Open...&quot;</span><span class="p">)</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-19-6"><a id="__codelineno-19-6" name="__codelineno-19-6" href="#__codelineno-19-6"></a><span class="w">        </span><span class="nx">Action</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;&amp;Save&quot;</span><span class="p">)</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-19-7"><a id="__codelineno-19-7" name="__codelineno-19-7" href="#__codelineno-19-7"></a><span class="w">        </span><span class="nx">Action</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;Save &amp;As...&quot;</span><span class="p">)</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-19-8"><a id="__codelineno-19-8" name="__codelineno-19-8" href="#__codelineno-19-8"></a><span class="w">        </span><span class="nx">MenuSeparator</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
</span><span id="__span-19-9"><a id="__codelineno-19-9" name="__codelineno-19-9" href="#__codelineno-19-9"></a><span class="w">        </span><span class="nx">Action</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-19-10"><a id="__codelineno-19-10" name="__codelineno-19-10" href="#__codelineno-19-10"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;&amp;Quit&quot;</span><span class="p">)</span>
</span><span id="__span-19-11"><a id="__codelineno-19-11" name="__codelineno-19-11" href="#__codelineno-19-11"></a><span class="w">            </span><span class="nx">onTriggered</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-19-12"><a id="__codelineno-19-12" name="__codelineno-19-12" href="#__codelineno-19-12"></a><span class="w">                </span><span class="nx">close</span><span class="p">()</span>
</span><span id="__span-19-13"><a id="__codelineno-19-13" name="__codelineno-19-13" href="#__codelineno-19-13"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-19-14"><a id="__codelineno-19-14" name="__codelineno-19-14" href="#__codelineno-19-14"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-19-15"><a id="__codelineno-19-15" name="__codelineno-19-15" href="#__codelineno-19-15"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-19-16"><a id="__codelineno-19-16" name="__codelineno-19-16" href="#__codelineno-19-16"></a><span class="p">}</span>
</span></code></pre></div>
<p>状态栏的使用,注意StatusBar为1.4版本中的</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-20-1"><a id="__codelineno-20-1" name="__codelineno-20-1" href="#__codelineno-20-1"></a><span class="nx">footer</span><span class="o">:</span><span class="w"> </span><span class="nx">Ctr1</span><span class="p">.</span><span class="nx">StatusBar</span><span class="p">{</span>
</span><span id="__span-20-2"><a id="__codelineno-20-2" name="__codelineno-20-2" href="#__codelineno-20-2"></a><span class="w">    </span><span class="nx">Row</span><span class="p">{</span>
</span><span id="__span-20-3"><a id="__codelineno-20-3" name="__codelineno-20-3" href="#__codelineno-20-3"></a><span class="w">        </span><span class="nx">Label</span><span class="p">{</span>
</span><span id="__span-20-4"><a id="__codelineno-20-4" name="__codelineno-20-4" href="#__codelineno-20-4"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Menu &#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">ApplicationWindow</span><span class="p">.</span><span class="nx">menuBar</span><span class="p">.</span><span class="nx">count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39; count&#39;</span>
</span><span id="__span-20-5"><a id="__codelineno-20-5" name="__codelineno-20-5" href="#__codelineno-20-5"></a><span class="w">            </span><span class="nx">font</span><span class="p">.</span><span class="nx">italic</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-20-6"><a id="__codelineno-20-6" name="__codelineno-20-6" href="#__codelineno-20-6"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-20-7"><a id="__codelineno-20-7" name="__codelineno-20-7" href="#__codelineno-20-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-20-8"><a id="__codelineno-20-8" name="__codelineno-20-8" href="#__codelineno-20-8"></a><span class="p">}</span>
</span></code></pre></div>
<p>工具栏的使用,和菜单栏使用基本差不多</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-21-1"><a id="__codelineno-21-1" name="__codelineno-21-1" href="#__codelineno-21-1"></a><span class="nx">header</span><span class="o">:</span><span class="w"> </span><span class="nx">ToolBar</span><span class="p">{</span>
</span><span id="__span-21-2"><a id="__codelineno-21-2" name="__codelineno-21-2" href="#__codelineno-21-2"></a><span class="w">    </span><span class="nx">Row</span><span class="p">{</span>
</span><span id="__span-21-3"><a id="__codelineno-21-3" name="__codelineno-21-3" href="#__codelineno-21-3"></a><span class="w">        </span><span class="nx">ToolButton</span><span class="p">{</span>
</span><span id="__span-21-4"><a id="__codelineno-21-4" name="__codelineno-21-4" href="#__codelineno-21-4"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;打开&#39;</span>
</span><span id="__span-21-5"><a id="__codelineno-21-5" name="__codelineno-21-5" href="#__codelineno-21-5"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-21-6"><a id="__codelineno-21-6" name="__codelineno-21-6" href="#__codelineno-21-6"></a><span class="w">        </span><span class="nx">ToolButton</span><span class="p">{</span>
</span><span id="__span-21-7"><a id="__codelineno-21-7" name="__codelineno-21-7" href="#__codelineno-21-7"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;退出&#39;</span>
</span><span id="__span-21-8"><a id="__codelineno-21-8" name="__codelineno-21-8" href="#__codelineno-21-8"></a><span class="w">            </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-21-9"><a id="__codelineno-21-9" name="__codelineno-21-9" href="#__codelineno-21-9"></a><span class="w">                </span><span class="nx">close</span><span class="p">()</span>
</span><span id="__span-21-10"><a id="__codelineno-21-10" name="__codelineno-21-10" href="#__codelineno-21-10"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-21-11"><a id="__codelineno-21-11" name="__codelineno-21-11" href="#__codelineno-21-11"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-21-12"><a id="__codelineno-21-12" name="__codelineno-21-12" href="#__codelineno-21-12"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-21-13"><a id="__codelineno-21-13" name="__codelineno-21-13" href="#__codelineno-21-13"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="259e698b"></a></p>
<h2 id="_12">附加属性<a class="headerlink" href="#_12" title="Permanent link">&para;</a></h2>
<p>可以附加到其他组件上面去的属性，如</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-22-1"><a id="__codelineno-22-1" name="__codelineno-22-1" href="#__codelineno-22-1"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="p">{</span>
</span><span id="__span-22-2"><a id="__codelineno-22-2" name="__codelineno-22-2" href="#__codelineno-22-2"></a><span class="p">}</span>
</span><span id="__span-22-3"><a id="__codelineno-22-3" name="__codelineno-22-3" href="#__codelineno-22-3"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onDestruction</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-22-4"><a id="__codelineno-22-4" name="__codelineno-22-4" href="#__codelineno-22-4"></a><span class="w">    </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;关闭&#39;</span><span class="p">)</span>
</span><span id="__span-22-5"><a id="__codelineno-22-5" name="__codelineno-22-5" href="#__codelineno-22-5"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="ListView"></a></p>
<h2 id="listview">ListView<a class="headerlink" href="#listview" title="Permanent link">&para;</a></h2>
<p><a name="c86c7a2c"></a></p>
<h3 id="_13">基础生成<a class="headerlink" href="#_13" title="Permanent link">&para;</a></h3>
<p>model为项目值，delegate项目代理，像对他的属性做一个添加修改</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-23-1"><a id="__codelineno-23-1" name="__codelineno-23-1" href="#__codelineno-23-1"></a><span class="nx">ListView</span><span class="p">{</span>
</span><span id="__span-23-2"><a id="__codelineno-23-2" name="__codelineno-23-2" href="#__codelineno-23-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">lqhList</span>
</span><span id="__span-23-3"><a id="__codelineno-23-3" name="__codelineno-23-3" href="#__codelineno-23-3"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-23-4"><a id="__codelineno-23-4" name="__codelineno-23-4" href="#__codelineno-23-4"></a><span class="w">    </span><span class="nx">model</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;第一个项目&#39;</span><span class="p">,</span><span class="s1">&#39;第二个项目&#39;</span><span class="p">]</span>
</span><span id="__span-23-5"><a id="__codelineno-23-5" name="__codelineno-23-5" href="#__codelineno-23-5"></a>
</span><span id="__span-23-6"><a id="__codelineno-23-6" name="__codelineno-23-6" href="#__codelineno-23-6"></a><span class="w">    </span><span class="nx">delegate</span><span class="o">:</span><span class="w"> </span><span class="nx">ItemDelegate</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-23-7"><a id="__codelineno-23-7" name="__codelineno-23-7" href="#__codelineno-23-7"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">width</span>
</span><span id="__span-23-8"><a id="__codelineno-23-8" name="__codelineno-23-8" href="#__codelineno-23-8"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">modelData</span>
</span><span id="__span-23-9"><a id="__codelineno-23-9" name="__codelineno-23-9" href="#__codelineno-23-9"></a>
</span><span id="__span-23-10"><a id="__codelineno-23-10" name="__codelineno-23-10" href="#__codelineno-23-10"></a><span class="w">        </span><span class="nx">background</span><span class="o">:</span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-23-11"><a id="__codelineno-23-11" name="__codelineno-23-11" href="#__codelineno-23-11"></a><span class="w">            </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">getColor</span><span class="p">()</span>
</span><span id="__span-23-12"><a id="__codelineno-23-12" name="__codelineno-23-12" href="#__codelineno-23-12"></a><span class="w">            </span><span class="kd">function</span><span class="w"> </span><span class="nx">getColor</span><span class="p">(){</span>
</span><span id="__span-23-13"><a id="__codelineno-23-13" name="__codelineno-23-13" href="#__codelineno-23-13"></a><span class="w">                </span><span class="kd">var</span><span class="w"> </span><span class="nx">colorObject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">BJ</span><span class="p">.</span><span class="nx">getColorRandom</span><span class="p">()</span>
</span><span id="__span-23-14"><a id="__codelineno-23-14" name="__codelineno-23-14" href="#__codelineno-23-14"></a><span class="w">                </span><span class="k">return</span><span class="w"> </span><span class="nx">Qt</span><span class="p">.</span><span class="nx">rgba</span><span class="p">(</span><span class="nx">colorObject</span><span class="p">.</span><span class="nx">red</span><span class="p">,</span><span class="nx">colorObject</span><span class="p">.</span><span class="nx">green</span><span class="p">,</span><span class="nx">colorObject</span><span class="p">.</span><span class="nx">blue</span><span class="p">)</span>
</span><span id="__span-23-15"><a id="__codelineno-23-15" name="__codelineno-23-15" href="#__codelineno-23-15"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-23-16"><a id="__codelineno-23-16" name="__codelineno-23-16" href="#__codelineno-23-16"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-23-17"><a id="__codelineno-23-17" name="__codelineno-23-17" href="#__codelineno-23-17"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">modelData</span><span class="p">)</span>
</span><span id="__span-23-18"><a id="__codelineno-23-18" name="__codelineno-23-18" href="#__codelineno-23-18"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-23-19"><a id="__codelineno-23-19" name="__codelineno-23-19" href="#__codelineno-23-19"></a><span class="w">    </span><span class="nx">ScrollBar</span><span class="p">.</span><span class="nx">vertical</span><span class="o">:</span><span class="w"> </span><span class="nx">ScrollBar</span><span class="p">{}</span>
</span><span id="__span-23-20"><a id="__codelineno-23-20" name="__codelineno-23-20" href="#__codelineno-23-20"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="d0eeaa0c"></a></p>
<h3 id="_14">封装颜色生成器<a class="headerlink" href="#_14" title="Permanent link">&para;</a></h3>
<p>在js文件中封装一个颜色生成器</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-24-1"><a id="__codelineno-24-1" name="__codelineno-24-1" href="#__codelineno-24-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">getRangeRandom</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span>
</span><span id="__span-24-2"><a id="__codelineno-24-2" name="__codelineno-24-2" href="#__codelineno-24-2"></a><span class="p">{</span>
</span><span id="__span-24-3"><a id="__codelineno-24-3" name="__codelineno-24-3" href="#__codelineno-24-3"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">max</span><span class="p">)</span>
</span><span id="__span-24-4"><a id="__codelineno-24-4" name="__codelineno-24-4" href="#__codelineno-24-4"></a><span class="p">}</span>
</span><span id="__span-24-5"><a id="__codelineno-24-5" name="__codelineno-24-5" href="#__codelineno-24-5"></a>
</span><span id="__span-24-6"><a id="__codelineno-24-6" name="__codelineno-24-6" href="#__codelineno-24-6"></a><span class="kd">function</span><span class="w"> </span><span class="nx">getColorRandom</span><span class="p">()</span>
</span><span id="__span-24-7"><a id="__codelineno-24-7" name="__codelineno-24-7" href="#__codelineno-24-7"></a><span class="p">{</span>
</span><span id="__span-24-8"><a id="__codelineno-24-8" name="__codelineno-24-8" href="#__codelineno-24-8"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">red</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRangeRandom</span><span class="p">(</span><span class="mf">256</span><span class="p">)</span>
</span><span id="__span-24-9"><a id="__codelineno-24-9" name="__codelineno-24-9" href="#__codelineno-24-9"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">green</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRangeRandom</span><span class="p">(</span><span class="mf">256</span><span class="p">)</span>
</span><span id="__span-24-10"><a id="__codelineno-24-10" name="__codelineno-24-10" href="#__codelineno-24-10"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">blue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRangeRandom</span><span class="p">(</span><span class="mf">256</span><span class="p">)</span>
</span><span id="__span-24-11"><a id="__codelineno-24-11" name="__codelineno-24-11" href="#__codelineno-24-11"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="nx">red</span><span class="o">:</span><span class="nx">red</span><span class="o">/</span><span class="mf">255</span><span class="p">,</span><span class="nx">green</span><span class="o">:</span><span class="nx">green</span><span class="o">/</span><span class="mf">255</span><span class="p">,</span><span class="nx">blue</span><span class="o">:</span><span class="nx">blue</span><span class="o">/</span><span class="mf">255</span><span class="p">}</span>
</span><span id="__span-24-12"><a id="__codelineno-24-12" name="__codelineno-24-12" href="#__codelineno-24-12"></a><span class="p">}</span>
</span><span id="__span-24-13"><a id="__codelineno-24-13" name="__codelineno-24-13" href="#__codelineno-24-13"></a>
</span><span id="__span-24-14"><a id="__codelineno-24-14" name="__codelineno-24-14" href="#__codelineno-24-14"></a><span class="kd">function</span><span class="w"> </span><span class="nx">getColorBulider</span><span class="p">(</span><span class="nx">rgbFunction</span><span class="p">){</span>
</span><span id="__span-24-15"><a id="__codelineno-24-15" name="__codelineno-24-15" href="#__codelineno-24-15"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-24-16"><a id="__codelineno-24-16" name="__codelineno-24-16" href="#__codelineno-24-16"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getColorRandom</span><span class="p">()</span>
</span><span id="__span-24-17"><a id="__codelineno-24-17" name="__codelineno-24-17" href="#__codelineno-24-17"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">rgbFunction</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">red</span><span class="p">,</span><span class="nx">color</span><span class="p">.</span><span class="nx">green</span><span class="p">,</span><span class="nx">color</span><span class="p">.</span><span class="nx">blue</span><span class="p">)</span>
</span><span id="__span-24-18"><a id="__codelineno-24-18" name="__codelineno-24-18" href="#__codelineno-24-18"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-24-19"><a id="__codelineno-24-19" name="__codelineno-24-19" href="#__codelineno-24-19"></a><span class="p">}</span>
</span></code></pre></div>
<p>然后再在QML文件中，做一个控制器</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-25-1"><a id="__codelineno-25-1" name="__codelineno-25-1" href="#__codelineno-25-1"></a><span class="nx">property</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">myColorBulider</span><span class="o">:</span><span class="w"> </span><span class="nx">Bj</span><span class="p">.</span><span class="nx">getColorBulider</span><span class="p">(</span><span class="nx">Qt</span><span class="p">.</span><span class="nx">rgba</span><span class="p">)</span>
</span><span id="__span-25-2"><a id="__codelineno-25-2" name="__codelineno-25-2" href="#__codelineno-25-2"></a>
</span><span id="__span-25-3"><a id="__codelineno-25-3" name="__codelineno-25-3" href="#__codelineno-25-3"></a><span class="nx">ListView</span><span class="p">{</span>
</span><span id="__span-25-4"><a id="__codelineno-25-4" name="__codelineno-25-4" href="#__codelineno-25-4"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">lqhList</span>
</span><span id="__span-25-5"><a id="__codelineno-25-5" name="__codelineno-25-5" href="#__codelineno-25-5"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-25-6"><a id="__codelineno-25-6" name="__codelineno-25-6" href="#__codelineno-25-6"></a><span class="w">    </span><span class="nx">model</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;第一个项目&#39;</span><span class="p">,</span><span class="s1">&#39;第二个项目&#39;</span><span class="p">]</span>
</span><span id="__span-25-7"><a id="__codelineno-25-7" name="__codelineno-25-7" href="#__codelineno-25-7"></a>
</span><span id="__span-25-8"><a id="__codelineno-25-8" name="__codelineno-25-8" href="#__codelineno-25-8"></a><span class="w">    </span><span class="nx">delegate</span><span class="o">:</span><span class="w"> </span><span class="nx">ItemDelegate</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-25-9"><a id="__codelineno-25-9" name="__codelineno-25-9" href="#__codelineno-25-9"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">width</span>
</span><span id="__span-25-10"><a id="__codelineno-25-10" name="__codelineno-25-10" href="#__codelineno-25-10"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">modelData</span>
</span><span id="__span-25-11"><a id="__codelineno-25-11" name="__codelineno-25-11" href="#__codelineno-25-11"></a>
</span><span id="__span-25-12"><a id="__codelineno-25-12" name="__codelineno-25-12" href="#__codelineno-25-12"></a><span class="w">        </span><span class="nx">background</span><span class="o">:</span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-25-13"><a id="__codelineno-25-13" name="__codelineno-25-13" href="#__codelineno-25-13"></a><span class="w">            </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-25-14"><a id="__codelineno-25-14" name="__codelineno-25-14" href="#__codelineno-25-14"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-25-15"><a id="__codelineno-25-15" name="__codelineno-25-15" href="#__codelineno-25-15"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">modelData</span><span class="p">)</span>
</span><span id="__span-25-16"><a id="__codelineno-25-16" name="__codelineno-25-16" href="#__codelineno-25-16"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-25-17"><a id="__codelineno-25-17" name="__codelineno-25-17" href="#__codelineno-25-17"></a><span class="w">    </span><span class="nx">ScrollBar</span><span class="p">.</span><span class="nx">vertical</span><span class="o">:</span><span class="w"> </span><span class="nx">ScrollBar</span><span class="p">{}</span>
</span><span id="__span-25-18"><a id="__codelineno-25-18" name="__codelineno-25-18" href="#__codelineno-25-18"></a>
</span><span id="__span-25-19"><a id="__codelineno-25-19" name="__codelineno-25-19" href="#__codelineno-25-19"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="f2f8c781"></a></p>
<h3 id="_15">添加组件<a class="headerlink" href="#_15" title="Permanent link">&para;</a></h3>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-26-1"><a id="__codelineno-26-1" name="__codelineno-26-1" href="#__codelineno-26-1"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-26-2"><a id="__codelineno-26-2" name="__codelineno-26-2" href="#__codelineno-26-2"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">modelArray</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">model</span>
</span><span id="__span-26-3"><a id="__codelineno-26-3" name="__codelineno-26-3" href="#__codelineno-26-3"></a><span class="w">    </span><span class="nx">modelArray</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;WangWu&#39;</span><span class="p">)</span>
</span><span id="__span-26-4"><a id="__codelineno-26-4" name="__codelineno-26-4" href="#__codelineno-26-4"></a><span class="w">    </span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">model</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">modelArray</span>
</span><span id="__span-26-5"><a id="__codelineno-26-5" name="__codelineno-26-5" href="#__codelineno-26-5"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="59b4ffa6"></a></p>
<h3 id="index">Index的使用<a class="headerlink" href="#index" title="Permanent link">&para;</a></h3>
<p>该实例为查看选中状态的Index和实际的Index是否相同</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-27-1"><a id="__codelineno-27-1" name="__codelineno-27-1" href="#__codelineno-27-1"></a><span class="nx">ListView</span><span class="p">{</span>
</span><span id="__span-27-2"><a id="__codelineno-27-2" name="__codelineno-27-2" href="#__codelineno-27-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">lqhList</span>
</span><span id="__span-27-3"><a id="__codelineno-27-3" name="__codelineno-27-3" href="#__codelineno-27-3"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-27-4"><a id="__codelineno-27-4" name="__codelineno-27-4" href="#__codelineno-27-4"></a><span class="w">    </span><span class="nx">model</span><span class="o">:</span><span class="p">[</span>
</span><span id="__span-27-5"><a id="__codelineno-27-5" name="__codelineno-27-5" href="#__codelineno-27-5"></a><span class="w">        </span><span class="p">{</span>
</span><span id="__span-27-6"><a id="__codelineno-27-6" name="__codelineno-27-6" href="#__codelineno-27-6"></a><span class="w">            </span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;ZhangSan&#39;</span><span class="p">,</span>
</span><span id="__span-27-7"><a id="__codelineno-27-7" name="__codelineno-27-7" href="#__codelineno-27-7"></a><span class="w">            </span><span class="nx">age</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">26</span>
</span><span id="__span-27-8"><a id="__codelineno-27-8" name="__codelineno-27-8" href="#__codelineno-27-8"></a><span class="w">        </span><span class="p">},</span>
</span><span id="__span-27-9"><a id="__codelineno-27-9" name="__codelineno-27-9" href="#__codelineno-27-9"></a><span class="w">        </span><span class="p">{</span>
</span><span id="__span-27-10"><a id="__codelineno-27-10" name="__codelineno-27-10" href="#__codelineno-27-10"></a><span class="w">            </span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;LiSi&#39;</span><span class="p">,</span>
</span><span id="__span-27-11"><a id="__codelineno-27-11" name="__codelineno-27-11" href="#__codelineno-27-11"></a><span class="w">            </span><span class="nx">age</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">36</span>
</span><span id="__span-27-12"><a id="__codelineno-27-12" name="__codelineno-27-12" href="#__codelineno-27-12"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-27-13"><a id="__codelineno-27-13" name="__codelineno-27-13" href="#__codelineno-27-13"></a><span class="w">    </span><span class="p">]</span>
</span><span id="__span-27-14"><a id="__codelineno-27-14" name="__codelineno-27-14" href="#__codelineno-27-14"></a><span class="w">    </span><span class="nx">delegate</span><span class="o">:</span><span class="w"> </span><span class="nx">ItemDelegate</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-27-15"><a id="__codelineno-27-15" name="__codelineno-27-15" href="#__codelineno-27-15"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">width</span>
</span><span id="__span-27-16"><a id="__codelineno-27-16" name="__codelineno-27-16" href="#__codelineno-27-16"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">modelData</span><span class="p">.</span><span class="nx">name</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">modelData</span><span class="p">.</span><span class="nx">age</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="p">(</span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">index</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39; Select&#39;</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
</span><span id="__span-27-17"><a id="__codelineno-27-17" name="__codelineno-27-17" href="#__codelineno-27-17"></a>
</span><span id="__span-27-18"><a id="__codelineno-27-18" name="__codelineno-27-18" href="#__codelineno-27-18"></a><span class="w">        </span><span class="nx">background</span><span class="o">:</span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-27-19"><a id="__codelineno-27-19" name="__codelineno-27-19" href="#__codelineno-27-19"></a><span class="w">            </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-27-20"><a id="__codelineno-27-20" name="__codelineno-27-20" href="#__codelineno-27-20"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-27-21"><a id="__codelineno-27-21" name="__codelineno-27-21" href="#__codelineno-27-21"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-27-22"><a id="__codelineno-27-22" name="__codelineno-27-22" href="#__codelineno-27-22"></a><span class="w">            </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">modelData</span><span class="p">))</span>
</span><span id="__span-27-23"><a id="__codelineno-27-23" name="__codelineno-27-23" href="#__codelineno-27-23"></a><span class="w">            </span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">index</span><span class="p">;</span>
</span><span id="__span-27-24"><a id="__codelineno-27-24" name="__codelineno-27-24" href="#__codelineno-27-24"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-27-25"><a id="__codelineno-27-25" name="__codelineno-27-25" href="#__codelineno-27-25"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-27-26"><a id="__codelineno-27-26" name="__codelineno-27-26" href="#__codelineno-27-26"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="ListModel"></a></p>
<h3 id="listmodel">ListModel<a class="headerlink" href="#listmodel" title="Permanent link">&para;</a></h3>
<p>在model中使用</p>
<p>简单使用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-28-1"><a id="__codelineno-28-1" name="__codelineno-28-1" href="#__codelineno-28-1"></a><span class="nx">ListView</span><span class="p">{</span>
</span><span id="__span-28-2"><a id="__codelineno-28-2" name="__codelineno-28-2" href="#__codelineno-28-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">lqhList</span>
</span><span id="__span-28-3"><a id="__codelineno-28-3" name="__codelineno-28-3" href="#__codelineno-28-3"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-28-4"><a id="__codelineno-28-4" name="__codelineno-28-4" href="#__codelineno-28-4"></a>
</span><span id="__span-28-5"><a id="__codelineno-28-5" name="__codelineno-28-5" href="#__codelineno-28-5"></a><span class="w">    </span><span class="nx">model</span><span class="o">:</span><span class="w"> </span><span class="nx">ListModel</span><span class="p">{</span>
</span><span id="__span-28-6"><a id="__codelineno-28-6" name="__codelineno-28-6" href="#__codelineno-28-6"></a><span class="w">        </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-28-7"><a id="__codelineno-28-7" name="__codelineno-28-7" href="#__codelineno-28-7"></a><span class="w">            </span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;zhangsan&#39;</span>
</span><span id="__span-28-8"><a id="__codelineno-28-8" name="__codelineno-28-8" href="#__codelineno-28-8"></a><span class="w">            </span><span class="nx">age</span><span class="o">:</span><span class="mf">67</span>
</span><span id="__span-28-9"><a id="__codelineno-28-9" name="__codelineno-28-9" href="#__codelineno-28-9"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-28-10"><a id="__codelineno-28-10" name="__codelineno-28-10" href="#__codelineno-28-10"></a><span class="w">        </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-28-11"><a id="__codelineno-28-11" name="__codelineno-28-11" href="#__codelineno-28-11"></a><span class="w">            </span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;lisi&#39;</span>
</span><span id="__span-28-12"><a id="__codelineno-28-12" name="__codelineno-28-12" href="#__codelineno-28-12"></a><span class="w">            </span><span class="nx">age</span><span class="o">:</span><span class="mf">88</span>
</span><span id="__span-28-13"><a id="__codelineno-28-13" name="__codelineno-28-13" href="#__codelineno-28-13"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-28-14"><a id="__codelineno-28-14" name="__codelineno-28-14" href="#__codelineno-28-14"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-28-15"><a id="__codelineno-28-15" name="__codelineno-28-15" href="#__codelineno-28-15"></a>
</span><span id="__span-28-16"><a id="__codelineno-28-16" name="__codelineno-28-16" href="#__codelineno-28-16"></a><span class="w">    </span><span class="nx">delegate</span><span class="o">:</span><span class="w"> </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-28-17"><a id="__codelineno-28-17" name="__codelineno-28-17" href="#__codelineno-28-17"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">width</span>
</span><span id="__span-28-18"><a id="__codelineno-28-18" name="__codelineno-28-18" href="#__codelineno-28-18"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">height</span><span class="o">*</span><span class="mf">0.1</span>
</span><span id="__span-28-19"><a id="__codelineno-28-19" name="__codelineno-28-19" href="#__codelineno-28-19"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-28-20"><a id="__codelineno-28-20" name="__codelineno-28-20" href="#__codelineno-28-20"></a>
</span><span id="__span-28-21"><a id="__codelineno-28-21" name="__codelineno-28-21" href="#__codelineno-28-21"></a><span class="w">        </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-28-22"><a id="__codelineno-28-22" name="__codelineno-28-22" href="#__codelineno-28-22"></a><span class="w">            </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-28-23"><a id="__codelineno-28-23" name="__codelineno-28-23" href="#__codelineno-28-23"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;name &quot;</span><span class="o">+</span><span class="nx">name</span><span class="o">+</span><span class="s2">&quot; age &quot;</span><span class="o">+</span><span class="nx">age</span><span class="p">)</span>
</span><span id="__span-28-24"><a id="__codelineno-28-24" name="__codelineno-28-24" href="#__codelineno-28-24"></a><span class="w">            </span><span class="nx">font</span><span class="p">.</span><span class="nx">pointSize</span><span class="o">:</span><span class="w"> </span><span class="mf">16</span>
</span><span id="__span-28-25"><a id="__codelineno-28-25" name="__codelineno-28-25" href="#__codelineno-28-25"></a><span class="w">            </span><span class="nx">verticalAlignment</span><span class="o">:</span><span class="w"> </span><span class="nx">Text</span><span class="p">.</span><span class="nx">AlignVCenter</span>
</span><span id="__span-28-26"><a id="__codelineno-28-26" name="__codelineno-28-26" href="#__codelineno-28-26"></a><span class="w">            </span><span class="nx">horizontalAlignment</span><span class="o">:</span><span class="w"> </span><span class="nx">Text</span><span class="p">.</span><span class="nx">AlignHCenter</span>
</span><span id="__span-28-27"><a id="__codelineno-28-27" name="__codelineno-28-27" href="#__codelineno-28-27"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-28-28"><a id="__codelineno-28-28" name="__codelineno-28-28" href="#__codelineno-28-28"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-28-29"><a id="__codelineno-28-29" name="__codelineno-28-29" href="#__codelineno-28-29"></a><span class="p">}</span>
</span></code></pre></div>
<p>初始化时添加model</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-29-1"><a id="__codelineno-29-1" name="__codelineno-29-1" href="#__codelineno-29-1"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-29-2"><a id="__codelineno-29-2" name="__codelineno-29-2" href="#__codelineno-29-2"></a><span class="w">    </span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">append</span><span class="p">({</span><span class="s1">&#39;name&#39;</span><span class="o">:</span><span class="s1">&#39;wangwu&#39;</span><span class="p">,</span><span class="s1">&#39;age&#39;</span><span class="o">:</span><span class="mf">77</span><span class="p">})</span>
</span><span id="__span-29-3"><a id="__codelineno-29-3" name="__codelineno-29-3" href="#__codelineno-29-3"></a><span class="w">    </span><span class="nx">myListModel</span><span class="p">.</span><span class="nx">append</span><span class="p">({</span><span class="s1">&#39;name&#39;</span><span class="o">:</span><span class="s1">&#39;wemz&#39;</span><span class="p">,</span><span class="s1">&#39;age&#39;</span><span class="o">:</span><span class="mf">22</span><span class="p">})</span>
</span><span id="__span-29-4"><a id="__codelineno-29-4" name="__codelineno-29-4" href="#__codelineno-29-4"></a><span class="p">}</span>
</span></code></pre></div>
<p>MouseArea的基础使用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-30-1"><a id="__codelineno-30-1" name="__codelineno-30-1" href="#__codelineno-30-1"></a><span class="w"> </span><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-30-2"><a id="__codelineno-30-2" name="__codelineno-30-2" href="#__codelineno-30-2"></a><span class="w">     </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-30-3"><a id="__codelineno-30-3" name="__codelineno-30-3" href="#__codelineno-30-3"></a>
</span><span id="__span-30-4"><a id="__codelineno-30-4" name="__codelineno-30-4" href="#__codelineno-30-4"></a><span class="w">     </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-30-5"><a id="__codelineno-30-5" name="__codelineno-30-5" href="#__codelineno-30-5"></a><span class="w">         </span><span class="kd">var</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">myListModel</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span>
</span><span id="__span-30-6"><a id="__codelineno-30-6" name="__codelineno-30-6" href="#__codelineno-30-6"></a><span class="w">         </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span><span class="nx">data</span><span class="p">.</span><span class="nx">age</span><span class="p">)</span>
</span><span id="__span-30-7"><a id="__codelineno-30-7" name="__codelineno-30-7" href="#__codelineno-30-7"></a><span class="w">         </span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">index</span>
</span><span id="__span-30-8"><a id="__codelineno-30-8" name="__codelineno-30-8" href="#__codelineno-30-8"></a><span class="w">     </span><span class="p">}</span>
</span><span id="__span-30-9"><a id="__codelineno-30-9" name="__codelineno-30-9" href="#__codelineno-30-9"></a><span class="w"> </span><span class="p">}</span>
</span></code></pre></div>
<p><a name="section"></a></p>
<h3 id="section">section<a class="headerlink" href="#section" title="Permanent link">&para;</a></h3>
<p>先选择列表对象中的一个数据，然后可直接可以对选择对象做一个代理</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-31-1"><a id="__codelineno-31-1" name="__codelineno-31-1" href="#__codelineno-31-1"></a><span class="nx">section</span><span class="p">.</span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;group&#39;</span>
</span><span id="__span-31-2"><a id="__codelineno-31-2" name="__codelineno-31-2" href="#__codelineno-31-2"></a><span class="nx">section</span><span class="p">.</span><span class="nx">delegate</span><span class="o">:</span><span class="w"> </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-31-3"><a id="__codelineno-31-3" name="__codelineno-31-3" href="#__codelineno-31-3"></a><span class="w">    </span><span class="nx">width</span><span class="o">:</span><span class="nx">lqhList</span><span class="p">.</span><span class="nx">width</span>
</span><span id="__span-31-4"><a id="__codelineno-31-4" name="__codelineno-31-4" href="#__codelineno-31-4"></a><span class="w">    </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">30</span>
</span><span id="__span-31-5"><a id="__codelineno-31-5" name="__codelineno-31-5" href="#__codelineno-31-5"></a><span class="w">    </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-31-6"><a id="__codelineno-31-6" name="__codelineno-31-6" href="#__codelineno-31-6"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-31-7"><a id="__codelineno-31-7" name="__codelineno-31-7" href="#__codelineno-31-7"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">centerIn</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-31-8"><a id="__codelineno-31-8" name="__codelineno-31-8" href="#__codelineno-31-8"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">section</span>
</span><span id="__span-31-9"><a id="__codelineno-31-9" name="__codelineno-31-9" href="#__codelineno-31-9"></a><span class="w">        </span><span class="nx">font</span><span class="p">.</span><span class="nx">pointSize</span><span class="o">:</span><span class="w"> </span><span class="mf">20</span>
</span><span id="__span-31-10"><a id="__codelineno-31-10" name="__codelineno-31-10" href="#__codelineno-31-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-31-11"><a id="__codelineno-31-11" name="__codelineno-31-11" href="#__codelineno-31-11"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="259e698b-1"></a></p>
<h3 id="_16">附加属性<a class="headerlink" href="#_16" title="Permanent link">&para;</a></h3>
<p>例如</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-32-1"><a id="__codelineno-32-1" name="__codelineno-32-1" href="#__codelineno-32-1"></a><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">ListView</span><span class="p">.</span><span class="nx">isCurrentItem</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s2">&quot;blue&quot;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;red&quot;</span>
</span></code></pre></div>
<p><a name="Timer"></a></p>
<h2 id="timer">Timer<a class="headerlink" href="#timer" title="Permanent link">&para;</a></h2>
<p>做一个定时器</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-33-1"><a id="__codelineno-33-1" name="__codelineno-33-1" href="#__codelineno-33-1"></a><span class="nx">Timer</span><span class="p">{</span>
</span><span id="__span-33-2"><a id="__codelineno-33-2" name="__codelineno-33-2" href="#__codelineno-33-2"></a><span class="w">    </span><span class="nx">interval</span><span class="o">:</span><span class="mf">1000</span><span class="c1">//定时时间</span>
</span><span id="__span-33-3"><a id="__codelineno-33-3" name="__codelineno-33-3" href="#__codelineno-33-3"></a><span class="w">    </span><span class="nx">repeat</span><span class="o">:</span><span class="kc">true</span><span class="c1">//是否重复</span>
</span><span id="__span-33-4"><a id="__codelineno-33-4" name="__codelineno-33-4" href="#__codelineno-33-4"></a><span class="w">    </span><span class="nx">running</span><span class="o">:</span><span class="kc">true</span><span class="c1">//是否运行</span>
</span><span id="__span-33-5"><a id="__codelineno-33-5" name="__codelineno-33-5" href="#__codelineno-33-5"></a><span class="w">    </span><span class="nx">triggeredOnStart</span><span class="o">:</span><span class="kc">true</span><span class="c1">//开启前触发一次</span>
</span><span id="__span-33-6"><a id="__codelineno-33-6" name="__codelineno-33-6" href="#__codelineno-33-6"></a><span class="w">    </span><span class="nx">onTriggered</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-33-7"><a id="__codelineno-33-7" name="__codelineno-33-7" href="#__codelineno-33-7"></a><span class="w">        </span><span class="nx">parent</span><span class="p">.</span><span class="nx">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Qt</span><span class="p">.</span><span class="nx">formatDateTime</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(),</span><span class="s1">&#39;yyyy-MM-dd hh:mm:ss&#39;</span><span class="p">)</span>
</span><span id="__span-33-8"><a id="__codelineno-33-8" name="__codelineno-33-8" href="#__codelineno-33-8"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-33-9"><a id="__codelineno-33-9" name="__codelineno-33-9" href="#__codelineno-33-9"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="Component"></a></p>
<h2 id="component">Component<a class="headerlink" href="#component" title="Permanent link">&para;</a></h2>
<p>先建立一个Component组件，给他一个ID，这里的示例给的ID是dateLabelTime</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-34-1"><a id="__codelineno-34-1" name="__codelineno-34-1" href="#__codelineno-34-1"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-34-2"><a id="__codelineno-34-2" name="__codelineno-34-2" href="#__codelineno-34-2"></a><span class="w">    </span><span class="k">for</span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="o">=</span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">10</span><span class="w"> </span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span>
</span><span id="__span-34-3"><a id="__codelineno-34-3" name="__codelineno-34-3" href="#__codelineno-34-3"></a><span class="w">    </span><span class="p">{</span>
</span><span id="__span-34-4"><a id="__codelineno-34-4" name="__codelineno-34-4" href="#__codelineno-34-4"></a><span class="w">        </span><span class="nx">dateLabelTime</span><span class="p">.</span><span class="nx">createObject</span><span class="p">(</span><span class="k">this</span><span class="p">,{</span><span class="nx">text</span><span class="o">:</span><span class="s1">&#39;lqh Example&#39;</span><span class="p">})</span>
</span><span id="__span-34-5"><a id="__codelineno-34-5" name="__codelineno-34-5" href="#__codelineno-34-5"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;建立成功&#39;</span><span class="p">)</span>
</span><span id="__span-34-6"><a id="__codelineno-34-6" name="__codelineno-34-6" href="#__codelineno-34-6"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-34-7"><a id="__codelineno-34-7" name="__codelineno-34-7" href="#__codelineno-34-7"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="ce31e5bb"></a></p>
<h2 id="_17">自定义一个控件<a class="headerlink" href="#_17" title="Permanent link">&para;</a></h2>
<p>建立一个自定义控件名相同的qml文件，然后将上一个示例中Component的内容写法加到该文件中</p>
<p>然后文件中直接调用该控件就可以了</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-35-1"><a id="__codelineno-35-1" name="__codelineno-35-1" href="#__codelineno-35-1"></a><span class="nx">LqhDateTimeLabel</span><span class="p">{</span>
</span><span id="__span-35-2"><a id="__codelineno-35-2" name="__codelineno-35-2" href="#__codelineno-35-2"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;LQH&#39;</span>
</span><span id="__span-35-3"><a id="__codelineno-35-3" name="__codelineno-35-3" href="#__codelineno-35-3"></a><span class="w">    </span><span class="nx">colorBulider</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span>
</span><span id="__span-35-4"><a id="__codelineno-35-4" name="__codelineno-35-4" href="#__codelineno-35-4"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="70af5cf6"></a></p>
<h2 id="js_1">JS异步加载（失败）<a class="headerlink" href="#js_1" title="Permanent link">&para;</a></h2>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-36-1"><a id="__codelineno-36-1" name="__codelineno-36-1" href="#__codelineno-36-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">createDateTimeLabelToColumn</span><span class="p">(</span><span class="nx">nums</span><span class="p">,</span><span class="w"> </span><span class="nx">cmp</span><span class="p">,</span><span class="w"> </span><span class="nx">date</span><span class="p">){</span>
</span><span id="__span-36-2"><a id="__codelineno-36-2" name="__codelineno-36-2" href="#__codelineno-36-2"></a><span class="w">    </span><span class="k">if</span><span class="p">(</span><span class="nx">cmp</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">cmp</span><span class="p">.</span><span class="nx">status</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">Component</span><span class="p">.</span><span class="nx">Ready</span><span class="p">)){</span>
</span><span id="__span-36-3"><a id="__codelineno-36-3" name="__codelineno-36-3" href="#__codelineno-36-3"></a><span class="w">        </span><span class="k">for</span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">nums</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span>
</span><span id="__span-36-4"><a id="__codelineno-36-4" name="__codelineno-36-4" href="#__codelineno-36-4"></a><span class="w">            </span><span class="nx">cmp</span><span class="p">.</span><span class="nx">createObject</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="nx">date</span><span class="p">)</span>
</span><span id="__span-36-5"><a id="__codelineno-36-5" name="__codelineno-36-5" href="#__codelineno-36-5"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-36-6"><a id="__codelineno-36-6" name="__codelineno-36-6" href="#__codelineno-36-6"></a><span class="p">}</span>
</span><span id="__span-36-7"><a id="__codelineno-36-7" name="__codelineno-36-7" href="#__codelineno-36-7"></a>
</span><span id="__span-36-8"><a id="__codelineno-36-8" name="__codelineno-36-8" href="#__codelineno-36-8"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-36-9"><a id="__codelineno-36-9" name="__codelineno-36-9" href="#__codelineno-36-9"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">cmp</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Qt</span><span class="p">.</span><span class="nx">createComponent</span><span class="p">(</span><span class="s1">&#39;./LqhDateTimeLabel.qml&#39;</span><span class="p">,</span><span class="nx">Component</span><span class="p">.</span><span class="nx">PreferSynchronous</span><span class="p">,</span><span class="nx">lqhItem</span><span class="p">)</span>
</span><span id="__span-36-10"><a id="__codelineno-36-10" name="__codelineno-36-10" href="#__codelineno-36-10"></a><span class="w">    </span><span class="nx">createDateTimeLabelToColumn</span><span class="p">(</span><span class="mf">5</span><span class="p">,</span><span class="nx">cmp</span><span class="p">,{</span><span class="nx">colorBuilder</span><span class="o">:</span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">})</span>
</span><span id="__span-36-11"><a id="__codelineno-36-11" name="__codelineno-36-11" href="#__codelineno-36-11"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="Loader"></a></p>
<h2 id="loader">Loader<a class="headerlink" href="#loader" title="Permanent link">&para;</a></h2>
<p>普通加载组件</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-37-1"><a id="__codelineno-37-1" name="__codelineno-37-1" href="#__codelineno-37-1"></a><span class="nx">Loader</span><span class="p">{</span>
</span><span id="__span-37-2"><a id="__codelineno-37-2" name="__codelineno-37-2" href="#__codelineno-37-2"></a><span class="w">    </span><span class="nx">sourceComponent</span><span class="o">:</span><span class="w"> </span><span class="nx">Component</span><span class="p">{</span>
</span><span id="__span-37-3"><a id="__codelineno-37-3" name="__codelineno-37-3" href="#__codelineno-37-3"></a><span class="w">        </span><span class="nx">LqhDateTimeLabel</span><span class="p">{</span>
</span><span id="__span-37-4"><a id="__codelineno-37-4" name="__codelineno-37-4" href="#__codelineno-37-4"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;lqh&#39;</span>
</span><span id="__span-37-5"><a id="__codelineno-37-5" name="__codelineno-37-5" href="#__codelineno-37-5"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-37-6"><a id="__codelineno-37-6" name="__codelineno-37-6" href="#__codelineno-37-6"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-37-7"><a id="__codelineno-37-7" name="__codelineno-37-7" href="#__codelineno-37-7"></a><span class="p">}</span>
</span></code></pre></div>
<p>加载带参数的路径文件</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-38-1"><a id="__codelineno-38-1" name="__codelineno-38-1" href="#__codelineno-38-1"></a><span class="nx">Loader</span><span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="nx">loader</span><span class="p">}</span>
</span><span id="__span-38-2"><a id="__codelineno-38-2" name="__codelineno-38-2" href="#__codelineno-38-2"></a>
</span><span id="__span-38-3"><a id="__codelineno-38-3" name="__codelineno-38-3" href="#__codelineno-38-3"></a><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w">                                                                        </span><span class="nx">loader</span><span class="p">.</span><span class="nx">setSource</span><span class="p">(</span><span class="s1">&#39;./LqhDateTimeLabel.qml&#39;</span><span class="p">{</span><span class="nx">text</span><span class="o">:</span><span class="s1">&#39;hello&#39;</span><span class="p">,</span><span class="nx">colorBulider</span><span class="o">:</span><span class="nx">myCo</span>
</span><span id="__span-38-4"><a id="__codelineno-38-4" name="__codelineno-38-4" href="#__codelineno-38-4"></a><span class="nx">lorBulider</span><span class="p">})</span>
</span><span id="__span-38-5"><a id="__codelineno-38-5" name="__codelineno-38-5" href="#__codelineno-38-5"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="MouseArea"></a></p>
<h2 id="mousearea">MouseArea<a class="headerlink" href="#mousearea" title="Permanent link">&para;</a></h2>
<p>mouse.x，mouse.y可以获取鼠标参数</p>
<p>propageteComposedEvents:true鼠标穿透属性</p>
<p>mouse.accepted = false鼠标穿透属性</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-39-1"><a id="__codelineno-39-1" name="__codelineno-39-1" href="#__codelineno-39-1"></a><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-39-2"><a id="__codelineno-39-2" name="__codelineno-39-2" href="#__codelineno-39-2"></a><span class="w">    </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-39-3"><a id="__codelineno-39-3" name="__codelineno-39-3" href="#__codelineno-39-3"></a><span class="w">    </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-39-4"><a id="__codelineno-39-4" name="__codelineno-39-4" href="#__codelineno-39-4"></a><span class="w">    </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;orange&#39;</span>
</span><span id="__span-39-5"><a id="__codelineno-39-5" name="__codelineno-39-5" href="#__codelineno-39-5"></a>
</span><span id="__span-39-6"><a id="__codelineno-39-6" name="__codelineno-39-6" href="#__codelineno-39-6"></a><span class="w">    </span><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-39-7"><a id="__codelineno-39-7" name="__codelineno-39-7" href="#__codelineno-39-7"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-39-8"><a id="__codelineno-39-8" name="__codelineno-39-8" href="#__codelineno-39-8"></a>
</span><span id="__span-39-9"><a id="__codelineno-39-9" name="__codelineno-39-9" href="#__codelineno-39-9"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-39-10"><a id="__codelineno-39-10" name="__codelineno-39-10" href="#__codelineno-39-10"></a><span class="w">            </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">mouse</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="nx">mouse</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span>
</span><span id="__span-39-11"><a id="__codelineno-39-11" name="__codelineno-39-11" href="#__codelineno-39-11"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-39-12"><a id="__codelineno-39-12" name="__codelineno-39-12" href="#__codelineno-39-12"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-39-13"><a id="__codelineno-39-13" name="__codelineno-39-13" href="#__codelineno-39-13"></a>
</span><span id="__span-39-14"><a id="__codelineno-39-14" name="__codelineno-39-14" href="#__codelineno-39-14"></a><span class="w">    </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-39-15"><a id="__codelineno-39-15" name="__codelineno-39-15" href="#__codelineno-39-15"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">myText</span>
</span><span id="__span-39-16"><a id="__codelineno-39-16" name="__codelineno-39-16" href="#__codelineno-39-16"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">centerIn</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-39-17"><a id="__codelineno-39-17" name="__codelineno-39-17" href="#__codelineno-39-17"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;Hello&quot;</span><span class="p">)</span>
</span><span id="__span-39-18"><a id="__codelineno-39-18" name="__codelineno-39-18" href="#__codelineno-39-18"></a>
</span><span id="__span-39-19"><a id="__codelineno-39-19" name="__codelineno-39-19" href="#__codelineno-39-19"></a><span class="w">        </span><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-39-20"><a id="__codelineno-39-20" name="__codelineno-39-20" href="#__codelineno-39-20"></a><span class="w">            </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-39-21"><a id="__codelineno-39-21" name="__codelineno-39-21" href="#__codelineno-39-21"></a><span class="w">            </span><span class="nx">propagateComposedEvents</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-39-22"><a id="__codelineno-39-22" name="__codelineno-39-22" href="#__codelineno-39-22"></a><span class="w">            </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-39-23"><a id="__codelineno-39-23" name="__codelineno-39-23" href="#__codelineno-39-23"></a><span class="w">                </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello&#39;</span><span class="p">)</span>
</span><span id="__span-39-24"><a id="__codelineno-39-24" name="__codelineno-39-24" href="#__codelineno-39-24"></a><span class="w">                </span><span class="nx">mouse</span><span class="p">.</span><span class="nx">accepted</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span>
</span><span id="__span-39-25"><a id="__codelineno-39-25" name="__codelineno-39-25" href="#__codelineno-39-25"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-39-26"><a id="__codelineno-39-26" name="__codelineno-39-26" href="#__codelineno-39-26"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-39-27"><a id="__codelineno-39-27" name="__codelineno-39-27" href="#__codelineno-39-27"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-39-28"><a id="__codelineno-39-28" name="__codelineno-39-28" href="#__codelineno-39-28"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="StackView"></a></p>
<h2 id="stackview">StackView<a class="headerlink" href="#stackview" title="Permanent link">&para;</a></h2>
<p>实现页面跳转，一个压栈和出栈的操作</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-40-1"><a id="__codelineno-40-1" name="__codelineno-40-1" href="#__codelineno-40-1"></a><span class="nx">Component</span><span class="p">{</span>
</span><span id="__span-40-2"><a id="__codelineno-40-2" name="__codelineno-40-2" href="#__codelineno-40-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">rect1</span>
</span><span id="__span-40-3"><a id="__codelineno-40-3" name="__codelineno-40-3" href="#__codelineno-40-3"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-40-4"><a id="__codelineno-40-4" name="__codelineno-40-4" href="#__codelineno-40-4"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-40-5"><a id="__codelineno-40-5" name="__codelineno-40-5" href="#__codelineno-40-5"></a><span class="w">        </span><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-40-6"><a id="__codelineno-40-6" name="__codelineno-40-6" href="#__codelineno-40-6"></a><span class="w">            </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-40-7"><a id="__codelineno-40-7" name="__codelineno-40-7" href="#__codelineno-40-7"></a><span class="w">            </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-40-8"><a id="__codelineno-40-8" name="__codelineno-40-8" href="#__codelineno-40-8"></a><span class="w">                </span><span class="nx">stack</span><span class="p">.</span><span class="nx">pop</span><span class="p">()</span>
</span><span id="__span-40-9"><a id="__codelineno-40-9" name="__codelineno-40-9" href="#__codelineno-40-9"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-40-10"><a id="__codelineno-40-10" name="__codelineno-40-10" href="#__codelineno-40-10"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-40-11"><a id="__codelineno-40-11" name="__codelineno-40-11" href="#__codelineno-40-11"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-40-12"><a id="__codelineno-40-12" name="__codelineno-40-12" href="#__codelineno-40-12"></a><span class="p">}</span>
</span><span id="__span-40-13"><a id="__codelineno-40-13" name="__codelineno-40-13" href="#__codelineno-40-13"></a>
</span><span id="__span-40-14"><a id="__codelineno-40-14" name="__codelineno-40-14" href="#__codelineno-40-14"></a><span class="nx">StackView</span><span class="p">{</span>
</span><span id="__span-40-15"><a id="__codelineno-40-15" name="__codelineno-40-15" href="#__codelineno-40-15"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">stack</span>
</span><span id="__span-40-16"><a id="__codelineno-40-16" name="__codelineno-40-16" href="#__codelineno-40-16"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-40-17"><a id="__codelineno-40-17" name="__codelineno-40-17" href="#__codelineno-40-17"></a>
</span><span id="__span-40-18"><a id="__codelineno-40-18" name="__codelineno-40-18" href="#__codelineno-40-18"></a><span class="w">    </span><span class="nx">initialItem</span><span class="o">:</span><span class="w"> </span><span class="nx">Component</span><span class="p">{</span>
</span><span id="__span-40-19"><a id="__codelineno-40-19" name="__codelineno-40-19" href="#__codelineno-40-19"></a><span class="w">        </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-40-20"><a id="__codelineno-40-20" name="__codelineno-40-20" href="#__codelineno-40-20"></a><span class="w">            </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-40-21"><a id="__codelineno-40-21" name="__codelineno-40-21" href="#__codelineno-40-21"></a><span class="w">            </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-40-22"><a id="__codelineno-40-22" name="__codelineno-40-22" href="#__codelineno-40-22"></a>
</span><span id="__span-40-23"><a id="__codelineno-40-23" name="__codelineno-40-23" href="#__codelineno-40-23"></a><span class="w">            </span><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-40-24"><a id="__codelineno-40-24" name="__codelineno-40-24" href="#__codelineno-40-24"></a><span class="w">                </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-40-25"><a id="__codelineno-40-25" name="__codelineno-40-25" href="#__codelineno-40-25"></a>
</span><span id="__span-40-26"><a id="__codelineno-40-26" name="__codelineno-40-26" href="#__codelineno-40-26"></a><span class="w">                </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-40-27"><a id="__codelineno-40-27" name="__codelineno-40-27" href="#__codelineno-40-27"></a><span class="w">                    </span><span class="nx">stack</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">rect1</span><span class="p">,{</span><span class="nx">color</span><span class="o">:</span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()})</span>
</span><span id="__span-40-28"><a id="__codelineno-40-28" name="__codelineno-40-28" href="#__codelineno-40-28"></a><span class="w">                </span><span class="p">}</span>
</span><span id="__span-40-29"><a id="__codelineno-40-29" name="__codelineno-40-29" href="#__codelineno-40-29"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-40-30"><a id="__codelineno-40-30" name="__codelineno-40-30" href="#__codelineno-40-30"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-40-31"><a id="__codelineno-40-31" name="__codelineno-40-31" href="#__codelineno-40-31"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-40-32"><a id="__codelineno-40-32" name="__codelineno-40-32" href="#__codelineno-40-32"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="StackLayout"></a></p>
<h2 id="stacklayout">StackLayout<a class="headerlink" href="#stacklayout" title="Permanent link">&para;</a></h2>
<p>栈布局，可以提前设定几个空间，然后通过改变他的currentIndex来改变现在的空间</p>
<p>示例代码</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-41-1"><a id="__codelineno-41-1" name="__codelineno-41-1" href="#__codelineno-41-1"></a><span class="nx">Row</span><span class="p">{</span>
</span><span id="__span-41-2"><a id="__codelineno-41-2" name="__codelineno-41-2" href="#__codelineno-41-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">btn</span>
</span><span id="__span-41-3"><a id="__codelineno-41-3" name="__codelineno-41-3" href="#__codelineno-41-3"></a><span class="w">    </span><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-41-4"><a id="__codelineno-41-4" name="__codelineno-41-4" href="#__codelineno-41-4"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Home&#39;</span>
</span><span id="__span-41-5"><a id="__codelineno-41-5" name="__codelineno-41-5" href="#__codelineno-41-5"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-41-6"><a id="__codelineno-41-6" name="__codelineno-41-6" href="#__codelineno-41-6"></a><span class="w">            </span><span class="nx">stack</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-41-7"><a id="__codelineno-41-7" name="__codelineno-41-7" href="#__codelineno-41-7"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-41-8"><a id="__codelineno-41-8" name="__codelineno-41-8" href="#__codelineno-41-8"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-41-9"><a id="__codelineno-41-9" name="__codelineno-41-9" href="#__codelineno-41-9"></a><span class="w">    </span><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-41-10"><a id="__codelineno-41-10" name="__codelineno-41-10" href="#__codelineno-41-10"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Text&#39;</span>
</span><span id="__span-41-11"><a id="__codelineno-41-11" name="__codelineno-41-11" href="#__codelineno-41-11"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-41-12"><a id="__codelineno-41-12" name="__codelineno-41-12" href="#__codelineno-41-12"></a><span class="w">            </span><span class="nx">stack</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1</span>
</span><span id="__span-41-13"><a id="__codelineno-41-13" name="__codelineno-41-13" href="#__codelineno-41-13"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-41-14"><a id="__codelineno-41-14" name="__codelineno-41-14" href="#__codelineno-41-14"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-41-15"><a id="__codelineno-41-15" name="__codelineno-41-15" href="#__codelineno-41-15"></a><span class="p">}</span>
</span><span id="__span-41-16"><a id="__codelineno-41-16" name="__codelineno-41-16" href="#__codelineno-41-16"></a><span class="nx">StackLayout</span><span class="p">{</span>
</span><span id="__span-41-17"><a id="__codelineno-41-17" name="__codelineno-41-17" href="#__codelineno-41-17"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">stack</span>
</span><span id="__span-41-18"><a id="__codelineno-41-18" name="__codelineno-41-18" href="#__codelineno-41-18"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">btn</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-41-19"><a id="__codelineno-41-19" name="__codelineno-41-19" href="#__codelineno-41-19"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-41-20"><a id="__codelineno-41-20" name="__codelineno-41-20" href="#__codelineno-41-20"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-41-21"><a id="__codelineno-41-21" name="__codelineno-41-21" href="#__codelineno-41-21"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-41-22"><a id="__codelineno-41-22" name="__codelineno-41-22" href="#__codelineno-41-22"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-41-23"><a id="__codelineno-41-23" name="__codelineno-41-23" href="#__codelineno-41-23"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-41-24"><a id="__codelineno-41-24" name="__codelineno-41-24" href="#__codelineno-41-24"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-41-25"><a id="__codelineno-41-25" name="__codelineno-41-25" href="#__codelineno-41-25"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-41-26"><a id="__codelineno-41-26" name="__codelineno-41-26" href="#__codelineno-41-26"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-41-27"><a id="__codelineno-41-27" name="__codelineno-41-27" href="#__codelineno-41-27"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-41-28"><a id="__codelineno-41-28" name="__codelineno-41-28" href="#__codelineno-41-28"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-41-29"><a id="__codelineno-41-29" name="__codelineno-41-29" href="#__codelineno-41-29"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;green&#39;</span>
</span><span id="__span-41-30"><a id="__codelineno-41-30" name="__codelineno-41-30" href="#__codelineno-41-30"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-41-31"><a id="__codelineno-41-31" name="__codelineno-41-31" href="#__codelineno-41-31"></a>
</span><span id="__span-41-32"><a id="__codelineno-41-32" name="__codelineno-41-32" href="#__codelineno-41-32"></a><span class="p">}</span>
</span></code></pre></div>
<p>对上面的代码做一个简单封装，例如按钮段</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-42-1"><a id="__codelineno-42-1" name="__codelineno-42-1" href="#__codelineno-42-1"></a><span class="nx">Row</span><span class="p">{</span>
</span><span id="__span-42-2"><a id="__codelineno-42-2" name="__codelineno-42-2" href="#__codelineno-42-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">header</span>
</span><span id="__span-42-3"><a id="__codelineno-42-3" name="__codelineno-42-3" href="#__codelineno-42-3"></a><span class="w">    </span><span class="nx">Component</span><span class="p">{</span>
</span><span id="__span-42-4"><a id="__codelineno-42-4" name="__codelineno-42-4" href="#__codelineno-42-4"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="nx">headerButton</span>
</span><span id="__span-42-5"><a id="__codelineno-42-5" name="__codelineno-42-5" href="#__codelineno-42-5"></a><span class="w">        </span><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-42-6"><a id="__codelineno-42-6" name="__codelineno-42-6" href="#__codelineno-42-6"></a><span class="w">            </span><span class="nx">property</span><span class="w"> </span><span class="nx">string</span><span class="w"> </span><span class="nx">menuText</span>
</span><span id="__span-42-7"><a id="__codelineno-42-7" name="__codelineno-42-7" href="#__codelineno-42-7"></a><span class="w">            </span><span class="nx">property</span><span class="w"> </span><span class="kd">var</span><span class="w">    </span><span class="nx">layout</span>
</span><span id="__span-42-8"><a id="__codelineno-42-8" name="__codelineno-42-8" href="#__codelineno-42-8"></a><span class="w">            </span><span class="nx">property</span><span class="w"> </span><span class="kr">int</span><span class="w">    </span><span class="nx">index</span>
</span><span id="__span-42-9"><a id="__codelineno-42-9" name="__codelineno-42-9" href="#__codelineno-42-9"></a>
</span><span id="__span-42-10"><a id="__codelineno-42-10" name="__codelineno-42-10" href="#__codelineno-42-10"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">menuText</span>
</span><span id="__span-42-11"><a id="__codelineno-42-11" name="__codelineno-42-11" href="#__codelineno-42-11"></a><span class="w">            </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="nx">layout</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">index</span>
</span><span id="__span-42-12"><a id="__codelineno-42-12" name="__codelineno-42-12" href="#__codelineno-42-12"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-42-13"><a id="__codelineno-42-13" name="__codelineno-42-13" href="#__codelineno-42-13"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-42-14"><a id="__codelineno-42-14" name="__codelineno-42-14" href="#__codelineno-42-14"></a>
</span><span id="__span-42-15"><a id="__codelineno-42-15" name="__codelineno-42-15" href="#__codelineno-42-15"></a><span class="w">    </span><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-42-16"><a id="__codelineno-42-16" name="__codelineno-42-16" href="#__codelineno-42-16"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">menus</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;Home&#39;</span><span class="p">,</span><span class="s1">&#39;Test&#39;</span><span class="p">]</span>
</span><span id="__span-42-17"><a id="__codelineno-42-17" name="__codelineno-42-17" href="#__codelineno-42-17"></a><span class="w">        </span><span class="nx">menus</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">,</span><span class="nx">index</span><span class="p">){</span>
</span><span id="__span-42-18"><a id="__codelineno-42-18" name="__codelineno-42-18" href="#__codelineno-42-18"></a><span class="w">          </span><span class="nx">headerButton</span><span class="p">.</span><span class="nx">createObject</span><span class="p">(</span><span class="nx">header</span><span class="p">{</span><span class="nx">layout</span><span class="o">:</span><span class="nx">stack</span><span class="p">,</span><span class="nx">menuText</span><span class="o">:</span><span class="nx">item</span><span class="p">,</span><span class="nx">index</span><span class="o">:</span><span class="nx">index</span><span class="p">})</span>
</span><span id="__span-42-19"><a id="__codelineno-42-19" name="__codelineno-42-19" href="#__codelineno-42-19"></a><span class="w">        </span><span class="p">})</span>
</span><span id="__span-42-20"><a id="__codelineno-42-20" name="__codelineno-42-20" href="#__codelineno-42-20"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-42-21"><a id="__codelineno-42-21" name="__codelineno-42-21" href="#__codelineno-42-21"></a><span class="p">}</span>
</span></code></pre></div>
<p>对stackLayout做一个简单封装</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-43-1"><a id="__codelineno-43-1" name="__codelineno-43-1" href="#__codelineno-43-1"></a><span class="nx">StackLayout</span><span class="p">{</span>
</span><span id="__span-43-2"><a id="__codelineno-43-2" name="__codelineno-43-2" href="#__codelineno-43-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">stack</span>
</span><span id="__span-43-3"><a id="__codelineno-43-3" name="__codelineno-43-3" href="#__codelineno-43-3"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">header</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-43-4"><a id="__codelineno-43-4" name="__codelineno-43-4" href="#__codelineno-43-4"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-43-5"><a id="__codelineno-43-5" name="__codelineno-43-5" href="#__codelineno-43-5"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-43-6"><a id="__codelineno-43-6" name="__codelineno-43-6" href="#__codelineno-43-6"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-43-7"><a id="__codelineno-43-7" name="__codelineno-43-7" href="#__codelineno-43-7"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-43-8"><a id="__codelineno-43-8" name="__codelineno-43-8" href="#__codelineno-43-8"></a>
</span><span id="__span-43-9"><a id="__codelineno-43-9" name="__codelineno-43-9" href="#__codelineno-43-9"></a><span class="w">    </span><span class="nx">Component</span><span class="p">{</span>
</span><span id="__span-43-10"><a id="__codelineno-43-10" name="__codelineno-43-10" href="#__codelineno-43-10"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">pageComponent</span>
</span><span id="__span-43-11"><a id="__codelineno-43-11" name="__codelineno-43-11" href="#__codelineno-43-11"></a><span class="w">        </span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-43-12"><a id="__codelineno-43-12" name="__codelineno-43-12" href="#__codelineno-43-12"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-43-13"><a id="__codelineno-43-13" name="__codelineno-43-13" href="#__codelineno-43-13"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-43-14"><a id="__codelineno-43-14" name="__codelineno-43-14" href="#__codelineno-43-14"></a><span class="w">    </span><span class="nx">Component</span><span class="p">.</span><span class="nx">onCompleted</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-43-15"><a id="__codelineno-43-15" name="__codelineno-43-15" href="#__codelineno-43-15"></a><span class="w">        </span><span class="k">for</span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="o">=</span><span class="mf">0</span><span class="p">;</span><span class="nx">i</span><span class="o">&lt;</span><span class="mf">2</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span id="__span-43-16"><a id="__codelineno-43-16" name="__codelineno-43-16" href="#__codelineno-43-16"></a><span class="w">            </span><span class="nx">pageComponent</span><span class="p">.</span><span class="nx">createObject</span><span class="p">(</span><span class="nx">stack</span><span class="p">,{</span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()})</span>
</span><span id="__span-43-17"><a id="__codelineno-43-17" name="__codelineno-43-17" href="#__codelineno-43-17"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-43-18"><a id="__codelineno-43-18" name="__codelineno-43-18" href="#__codelineno-43-18"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-43-19"><a id="__codelineno-43-19" name="__codelineno-43-19" href="#__codelineno-43-19"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="cd4610e5"></a></p>
<h2 id="repeater">Repeater中继器<a class="headerlink" href="#repeater" title="Permanent link">&para;</a></h2>
<p>在其中创建的对象父对象为中继器上一级</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-44-1"><a id="__codelineno-44-1" name="__codelineno-44-1" href="#__codelineno-44-1"></a><span class="nx">Row</span><span class="p">{</span>
</span><span id="__span-44-2"><a id="__codelineno-44-2" name="__codelineno-44-2" href="#__codelineno-44-2"></a><span class="w">    </span><span class="nx">objectName</span><span class="o">:</span><span class="s1">&#39;lqh obj&#39;</span>
</span><span id="__span-44-3"><a id="__codelineno-44-3" name="__codelineno-44-3" href="#__codelineno-44-3"></a><span class="w">    </span><span class="nx">Repeater</span><span class="p">{</span>
</span><span id="__span-44-4"><a id="__codelineno-44-4" name="__codelineno-44-4" href="#__codelineno-44-4"></a><span class="w">        </span><span class="nx">model</span><span class="o">:</span><span class="mf">3</span>
</span><span id="__span-44-5"><a id="__codelineno-44-5" name="__codelineno-44-5" href="#__codelineno-44-5"></a><span class="w">        </span><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-44-6"><a id="__codelineno-44-6" name="__codelineno-44-6" href="#__codelineno-44-6"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">index</span><span class="o">+</span><span class="s1">&#39;&#39;</span>
</span><span id="__span-44-7"><a id="__codelineno-44-7" name="__codelineno-44-7" href="#__codelineno-44-7"></a><span class="w">            </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-44-8"><a id="__codelineno-44-8" name="__codelineno-44-8" href="#__codelineno-44-8"></a><span class="w">                </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">parent</span><span class="p">.</span><span class="nx">objectName</span><span class="p">)</span>
</span><span id="__span-44-9"><a id="__codelineno-44-9" name="__codelineno-44-9" href="#__codelineno-44-9"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-44-10"><a id="__codelineno-44-10" name="__codelineno-44-10" href="#__codelineno-44-10"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-44-11"><a id="__codelineno-44-11" name="__codelineno-44-11" href="#__codelineno-44-11"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-44-12"><a id="__codelineno-44-12" name="__codelineno-44-12" href="#__codelineno-44-12"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="3fe2b7c6"></a></p>
<h2 id="swipeviewtabbar">SwipeView和TabBar<a class="headerlink" href="#swipeviewtabbar" title="Permanent link">&para;</a></h2>
<p>SwipeView是可以滑动的视图控件，常和PageIndicator共用</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-45-1"><a id="__codelineno-45-1" name="__codelineno-45-1" href="#__codelineno-45-1"></a><span class="nx">TabBar</span><span class="p">{</span>
</span><span id="__span-45-2"><a id="__codelineno-45-2" name="__codelineno-45-2" href="#__codelineno-45-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">headerButton</span>
</span><span id="__span-45-3"><a id="__codelineno-45-3" name="__codelineno-45-3" href="#__codelineno-45-3"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-45-4"><a id="__codelineno-45-4" name="__codelineno-45-4" href="#__codelineno-45-4"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-45-5"><a id="__codelineno-45-5" name="__codelineno-45-5" href="#__codelineno-45-5"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span>
</span><span id="__span-45-6"><a id="__codelineno-45-6" name="__codelineno-45-6" href="#__codelineno-45-6"></a><span class="w">    </span><span class="nx">Repeater</span><span class="p">{</span>
</span><span id="__span-45-7"><a id="__codelineno-45-7" name="__codelineno-45-7" href="#__codelineno-45-7"></a><span class="w">        </span><span class="nx">model</span><span class="o">:</span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">page</span>
</span><span id="__span-45-8"><a id="__codelineno-45-8" name="__codelineno-45-8" href="#__codelineno-45-8"></a><span class="w">        </span><span class="nx">TabButton</span><span class="p">{</span>
</span><span id="__span-45-9"><a id="__codelineno-45-9" name="__codelineno-45-9" href="#__codelineno-45-9"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">modelData</span>
</span><span id="__span-45-10"><a id="__codelineno-45-10" name="__codelineno-45-10" href="#__codelineno-45-10"></a><span class="w">            </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-45-11"><a id="__codelineno-45-11" name="__codelineno-45-11" href="#__codelineno-45-11"></a><span class="w">                </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">index</span>
</span><span id="__span-45-12"><a id="__codelineno-45-12" name="__codelineno-45-12" href="#__codelineno-45-12"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-45-13"><a id="__codelineno-45-13" name="__codelineno-45-13" href="#__codelineno-45-13"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-45-14"><a id="__codelineno-45-14" name="__codelineno-45-14" href="#__codelineno-45-14"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-45-15"><a id="__codelineno-45-15" name="__codelineno-45-15" href="#__codelineno-45-15"></a><span class="p">}</span>
</span><span id="__span-45-16"><a id="__codelineno-45-16" name="__codelineno-45-16" href="#__codelineno-45-16"></a><span class="nx">SwipeView</span><span class="p">{</span>
</span><span id="__span-45-17"><a id="__codelineno-45-17" name="__codelineno-45-17" href="#__codelineno-45-17"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span>
</span><span id="__span-45-18"><a id="__codelineno-45-18" name="__codelineno-45-18" href="#__codelineno-45-18"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span>
</span><span id="__span-45-19"><a id="__codelineno-45-19" name="__codelineno-45-19" href="#__codelineno-45-19"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-45-20"><a id="__codelineno-45-20" name="__codelineno-45-20" href="#__codelineno-45-20"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-45-21"><a id="__codelineno-45-21" name="__codelineno-45-21" href="#__codelineno-45-21"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">headerButton</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-45-22"><a id="__codelineno-45-22" name="__codelineno-45-22" href="#__codelineno-45-22"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-45-23"><a id="__codelineno-45-23" name="__codelineno-45-23" href="#__codelineno-45-23"></a>
</span><span id="__span-45-24"><a id="__codelineno-45-24" name="__codelineno-45-24" href="#__codelineno-45-24"></a><span class="w">    </span><span class="nx">Repeater</span><span class="p">{</span>
</span><span id="__span-45-25"><a id="__codelineno-45-25" name="__codelineno-45-25" href="#__codelineno-45-25"></a><span class="w">        </span><span class="nx">model</span><span class="o">:</span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">page</span><span class="p">.</span><span class="nx">length</span>
</span><span id="__span-45-26"><a id="__codelineno-45-26" name="__codelineno-45-26" href="#__codelineno-45-26"></a><span class="w">        </span><span class="nx">Rectangle</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-45-27"><a id="__codelineno-45-27" name="__codelineno-45-27" href="#__codelineno-45-27"></a><span class="w">            </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-45-28"><a id="__codelineno-45-28" name="__codelineno-45-28" href="#__codelineno-45-28"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-45-29"><a id="__codelineno-45-29" name="__codelineno-45-29" href="#__codelineno-45-29"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-45-30"><a id="__codelineno-45-30" name="__codelineno-45-30" href="#__codelineno-45-30"></a><span class="p">}</span>
</span><span id="__span-45-31"><a id="__codelineno-45-31" name="__codelineno-45-31" href="#__codelineno-45-31"></a><span class="nx">PageIndicator</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-45-32"><a id="__codelineno-45-32" name="__codelineno-45-32" href="#__codelineno-45-32"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">indicator</span>
</span><span id="__span-45-33"><a id="__codelineno-45-33" name="__codelineno-45-33" href="#__codelineno-45-33"></a>
</span><span id="__span-45-34"><a id="__codelineno-45-34" name="__codelineno-45-34" href="#__codelineno-45-34"></a><span class="w">    </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">count</span>
</span><span id="__span-45-35"><a id="__codelineno-45-35" name="__codelineno-45-35" href="#__codelineno-45-35"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span>
</span><span id="__span-45-36"><a id="__codelineno-45-36" name="__codelineno-45-36" href="#__codelineno-45-36"></a>
</span><span id="__span-45-37"><a id="__codelineno-45-37" name="__codelineno-45-37" href="#__codelineno-45-37"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-45-38"><a id="__codelineno-45-38" name="__codelineno-45-38" href="#__codelineno-45-38"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">horizontalCenter</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">horizontalCenter</span>
</span><span id="__span-45-39"><a id="__codelineno-45-39" name="__codelineno-45-39" href="#__codelineno-45-39"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="c27512c8"></a></p>
<h2 id="button">Button的用户自定义<a class="headerlink" href="#button" title="Permanent link">&para;</a></h2>
<p>在帮助文档中，找Qt 5.12<br />Qt Quick Controls<br />Customizing Qt Quick Controls 2</p>
<p>示例代码,记得要给按钮加ID才能自己修改</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-46-1"><a id="__codelineno-46-1" name="__codelineno-46-1" href="#__codelineno-46-1"></a><span class="nx">Button</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-46-2"><a id="__codelineno-46-2" name="__codelineno-46-2" href="#__codelineno-46-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">control</span>
</span><span id="__span-46-3"><a id="__codelineno-46-3" name="__codelineno-46-3" href="#__codelineno-46-3"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">qsTr</span><span class="p">(</span><span class="s2">&quot;Button&quot;</span><span class="p">)</span>
</span><span id="__span-46-4"><a id="__codelineno-46-4" name="__codelineno-46-4" href="#__codelineno-46-4"></a>
</span><span id="__span-46-5"><a id="__codelineno-46-5" name="__codelineno-46-5" href="#__codelineno-46-5"></a><span class="w">    </span><span class="nx">contentItem</span><span class="o">:</span><span class="w"> </span><span class="nx">Text</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-46-6"><a id="__codelineno-46-6" name="__codelineno-46-6" href="#__codelineno-46-6"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">control</span><span class="p">.</span><span class="nx">text</span>
</span><span id="__span-46-7"><a id="__codelineno-46-7" name="__codelineno-46-7" href="#__codelineno-46-7"></a><span class="w">        </span><span class="nx">font</span><span class="o">:</span><span class="w"> </span><span class="nx">control</span><span class="p">.</span><span class="nx">font</span>
</span><span id="__span-46-8"><a id="__codelineno-46-8" name="__codelineno-46-8" href="#__codelineno-46-8"></a><span class="w">        </span><span class="nx">opacity</span><span class="o">:</span><span class="w"> </span><span class="nx">enabled</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="mf">1.0</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">0.3</span>
</span><span id="__span-46-9"><a id="__codelineno-46-9" name="__codelineno-46-9" href="#__codelineno-46-9"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">control</span><span class="p">.</span><span class="nx">down</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s2">&quot;#17a81a&quot;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;#21be2b&quot;</span>
</span><span id="__span-46-10"><a id="__codelineno-46-10" name="__codelineno-46-10" href="#__codelineno-46-10"></a><span class="w">        </span><span class="nx">horizontalAlignment</span><span class="o">:</span><span class="w"> </span><span class="nx">Text</span><span class="p">.</span><span class="nx">AlignHCenter</span>
</span><span id="__span-46-11"><a id="__codelineno-46-11" name="__codelineno-46-11" href="#__codelineno-46-11"></a><span class="w">        </span><span class="nx">verticalAlignment</span><span class="o">:</span><span class="w"> </span><span class="nx">Text</span><span class="p">.</span><span class="nx">AlignVCenter</span>
</span><span id="__span-46-12"><a id="__codelineno-46-12" name="__codelineno-46-12" href="#__codelineno-46-12"></a><span class="w">        </span><span class="nx">elide</span><span class="o">:</span><span class="w"> </span><span class="nx">Text</span><span class="p">.</span><span class="nx">ElideRight</span>
</span><span id="__span-46-13"><a id="__codelineno-46-13" name="__codelineno-46-13" href="#__codelineno-46-13"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-46-14"><a id="__codelineno-46-14" name="__codelineno-46-14" href="#__codelineno-46-14"></a>
</span><span id="__span-46-15"><a id="__codelineno-46-15" name="__codelineno-46-15" href="#__codelineno-46-15"></a><span class="w">    </span><span class="nx">background</span><span class="o">:</span><span class="w"> </span><span class="nx">Rectangle</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-46-16"><a id="__codelineno-46-16" name="__codelineno-46-16" href="#__codelineno-46-16"></a><span class="w">        </span><span class="nx">implicitWidth</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-46-17"><a id="__codelineno-46-17" name="__codelineno-46-17" href="#__codelineno-46-17"></a><span class="w">        </span><span class="nx">implicitHeight</span><span class="o">:</span><span class="w"> </span><span class="mf">40</span>
</span><span id="__span-46-18"><a id="__codelineno-46-18" name="__codelineno-46-18" href="#__codelineno-46-18"></a><span class="w">        </span><span class="nx">opacity</span><span class="o">:</span><span class="w"> </span><span class="nx">enabled</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="mf">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">0.3</span>
</span><span id="__span-46-19"><a id="__codelineno-46-19" name="__codelineno-46-19" href="#__codelineno-46-19"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">control</span><span class="p">.</span><span class="nx">down</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39;red&#39;</span><span class="o">:</span><span class="s1">&#39;white&#39;</span>
</span><span id="__span-46-20"><a id="__codelineno-46-20" name="__codelineno-46-20" href="#__codelineno-46-20"></a><span class="w">        </span><span class="nx">border</span><span class="p">.</span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">control</span><span class="p">.</span><span class="nx">down</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s2">&quot;#17a81a&quot;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;#21be2b&quot;</span>
</span><span id="__span-46-21"><a id="__codelineno-46-21" name="__codelineno-46-21" href="#__codelineno-46-21"></a><span class="w">        </span><span class="nx">border</span><span class="p">.</span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span>
</span><span id="__span-46-22"><a id="__codelineno-46-22" name="__codelineno-46-22" href="#__codelineno-46-22"></a><span class="w">        </span><span class="nx">radius</span><span class="o">:</span><span class="w"> </span><span class="mf">2</span>
</span><span id="__span-46-23"><a id="__codelineno-46-23" name="__codelineno-46-23" href="#__codelineno-46-23"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-46-24"><a id="__codelineno-46-24" name="__codelineno-46-24" href="#__codelineno-46-24"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="4a06b950"></a></p>
<h2 id="state">State状态<a class="headerlink" href="#state" title="Permanent link">&para;</a></h2>
<p>给一个对象定义一个状态实现，主要是要给状态定义一个目标</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-47-1"><a id="__codelineno-47-1" name="__codelineno-47-1" href="#__codelineno-47-1"></a><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-47-2"><a id="__codelineno-47-2" name="__codelineno-47-2" href="#__codelineno-47-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">rect</span>
</span><span id="__span-47-3"><a id="__codelineno-47-3" name="__codelineno-47-3" href="#__codelineno-47-3"></a><span class="w">    </span><span class="nx">implicitHeight</span><span class="o">:</span><span class="w"> </span><span class="mf">200</span>
</span><span id="__span-47-4"><a id="__codelineno-47-4" name="__codelineno-47-4" href="#__codelineno-47-4"></a><span class="w">    </span><span class="nx">implicitWidth</span><span class="o">:</span><span class="w"> </span><span class="mf">200</span>
</span><span id="__span-47-5"><a id="__codelineno-47-5" name="__codelineno-47-5" href="#__codelineno-47-5"></a><span class="w">    </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-47-6"><a id="__codelineno-47-6" name="__codelineno-47-6" href="#__codelineno-47-6"></a>
</span><span id="__span-47-7"><a id="__codelineno-47-7" name="__codelineno-47-7" href="#__codelineno-47-7"></a><span class="w">    </span><span class="nx">states</span><span class="o">:</span><span class="w"> </span><span class="nx">State</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-47-8"><a id="__codelineno-47-8" name="__codelineno-47-8" href="#__codelineno-47-8"></a><span class="w">        </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;myState&quot;</span>
</span><span id="__span-47-9"><a id="__codelineno-47-9" name="__codelineno-47-9" href="#__codelineno-47-9"></a><span class="w">        </span><span class="nx">PropertyChanges</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-47-10"><a id="__codelineno-47-10" name="__codelineno-47-10" href="#__codelineno-47-10"></a><span class="w">            </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-47-11"><a id="__codelineno-47-11" name="__codelineno-47-11" href="#__codelineno-47-11"></a><span class="w">            </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-47-12"><a id="__codelineno-47-12" name="__codelineno-47-12" href="#__codelineno-47-12"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-47-13"><a id="__codelineno-47-13" name="__codelineno-47-13" href="#__codelineno-47-13"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-47-14"><a id="__codelineno-47-14" name="__codelineno-47-14" href="#__codelineno-47-14"></a><span class="w">    </span><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-47-15"><a id="__codelineno-47-15" name="__codelineno-47-15" href="#__codelineno-47-15"></a><span class="w">        </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="nx">parent</span>
</span><span id="__span-47-16"><a id="__codelineno-47-16" name="__codelineno-47-16" href="#__codelineno-47-16"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-47-17"><a id="__codelineno-47-17" name="__codelineno-47-17" href="#__codelineno-47-17"></a><span class="w">            </span><span class="nx">rect</span><span class="p">.</span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rect</span><span class="p">.</span><span class="nx">state</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;myState&#39;</span><span class="o">?</span><span class="s1">&#39; &#39;</span><span class="o">:</span><span class="s1">&#39;myState&#39;</span>
</span><span id="__span-47-18"><a id="__codelineno-47-18" name="__codelineno-47-18" href="#__codelineno-47-18"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-47-19"><a id="__codelineno-47-19" name="__codelineno-47-19" href="#__codelineno-47-19"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-47-20"><a id="__codelineno-47-20" name="__codelineno-47-20" href="#__codelineno-47-20"></a><span class="p">}</span>
</span></code></pre></div>
<p>还可以使用when来触发状态</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-48-1"><a id="__codelineno-48-1" name="__codelineno-48-1" href="#__codelineno-48-1"></a><span class="nx">states</span><span class="o">:</span><span class="w"> </span><span class="nx">State</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-48-2"><a id="__codelineno-48-2" name="__codelineno-48-2" href="#__codelineno-48-2"></a><span class="w">    </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;myState&quot;</span>
</span><span id="__span-48-3"><a id="__codelineno-48-3" name="__codelineno-48-3" href="#__codelineno-48-3"></a><span class="w">    </span><span class="nx">when</span><span class="o">:</span><span class="nx">myMouse</span><span class="p">.</span><span class="nx">pressed</span>
</span><span id="__span-48-4"><a id="__codelineno-48-4" name="__codelineno-48-4" href="#__codelineno-48-4"></a><span class="w">    </span><span class="nx">PropertyChanges</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-48-5"><a id="__codelineno-48-5" name="__codelineno-48-5" href="#__codelineno-48-5"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-48-6"><a id="__codelineno-48-6" name="__codelineno-48-6" href="#__codelineno-48-6"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-48-7"><a id="__codelineno-48-7" name="__codelineno-48-7" href="#__codelineno-48-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-48-8"><a id="__codelineno-48-8" name="__codelineno-48-8" href="#__codelineno-48-8"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="2c7971a0"></a></p>
<h2 id="_18">状态机的实现<a class="headerlink" href="#_18" title="Permanent link">&para;</a></h2>
<p>其实就是不同的状态下，控件或者其他元素有着不同的实现</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-49-1"><a id="__codelineno-49-1" name="__codelineno-49-1" href="#__codelineno-49-1"></a><span class="nx">SwipeView</span><span class="p">{</span>
</span><span id="__span-49-2"><a id="__codelineno-49-2" name="__codelineno-49-2" href="#__codelineno-49-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span>
</span><span id="__span-49-3"><a id="__codelineno-49-3" name="__codelineno-49-3" href="#__codelineno-49-3"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span>
</span><span id="__span-49-4"><a id="__codelineno-49-4" name="__codelineno-49-4" href="#__codelineno-49-4"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">top</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">top</span>
</span><span id="__span-49-5"><a id="__codelineno-49-5" name="__codelineno-49-5" href="#__codelineno-49-5"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">btn</span><span class="p">.</span><span class="nx">top</span>
</span><span id="__span-49-6"><a id="__codelineno-49-6" name="__codelineno-49-6" href="#__codelineno-49-6"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">left</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">left</span>
</span><span id="__span-49-7"><a id="__codelineno-49-7" name="__codelineno-49-7" href="#__codelineno-49-7"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">right</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">right</span>
</span><span id="__span-49-8"><a id="__codelineno-49-8" name="__codelineno-49-8" href="#__codelineno-49-8"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-9"><a id="__codelineno-49-9" name="__codelineno-49-9" href="#__codelineno-49-9"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">firstPage</span>
</span><span id="__span-49-10"><a id="__codelineno-49-10" name="__codelineno-49-10" href="#__codelineno-49-10"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span>
</span><span id="__span-49-11"><a id="__codelineno-49-11" name="__codelineno-49-11" href="#__codelineno-49-11"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-49-12"><a id="__codelineno-49-12" name="__codelineno-49-12" href="#__codelineno-49-12"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-13"><a id="__codelineno-49-13" name="__codelineno-49-13" href="#__codelineno-49-13"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">secondPage</span>
</span><span id="__span-49-14"><a id="__codelineno-49-14" name="__codelineno-49-14" href="#__codelineno-49-14"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;blue&#39;</span>
</span><span id="__span-49-15"><a id="__codelineno-49-15" name="__codelineno-49-15" href="#__codelineno-49-15"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-49-16"><a id="__codelineno-49-16" name="__codelineno-49-16" href="#__codelineno-49-16"></a><span class="w">    </span><span class="nx">Rectangle</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-17"><a id="__codelineno-49-17" name="__codelineno-49-17" href="#__codelineno-49-17"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">thirdPage</span>
</span><span id="__span-49-18"><a id="__codelineno-49-18" name="__codelineno-49-18" href="#__codelineno-49-18"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;green&#39;</span>
</span><span id="__span-49-19"><a id="__codelineno-49-19" name="__codelineno-49-19" href="#__codelineno-49-19"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-49-20"><a id="__codelineno-49-20" name="__codelineno-49-20" href="#__codelineno-49-20"></a><span class="p">}</span>
</span><span id="__span-49-21"><a id="__codelineno-49-21" name="__codelineno-49-21" href="#__codelineno-49-21"></a><span class="nx">PageIndicator</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-22"><a id="__codelineno-49-22" name="__codelineno-49-22" href="#__codelineno-49-22"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="nx">indicator</span>
</span><span id="__span-49-23"><a id="__codelineno-49-23" name="__codelineno-49-23" href="#__codelineno-49-23"></a>
</span><span id="__span-49-24"><a id="__codelineno-49-24" name="__codelineno-49-24" href="#__codelineno-49-24"></a><span class="w">    </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">count</span>
</span><span id="__span-49-25"><a id="__codelineno-49-25" name="__codelineno-49-25" href="#__codelineno-49-25"></a><span class="w">    </span><span class="nx">currentIndex</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span>
</span><span id="__span-49-26"><a id="__codelineno-49-26" name="__codelineno-49-26" href="#__codelineno-49-26"></a>
</span><span id="__span-49-27"><a id="__codelineno-49-27" name="__codelineno-49-27" href="#__codelineno-49-27"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-49-28"><a id="__codelineno-49-28" name="__codelineno-49-28" href="#__codelineno-49-28"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">horizontalCenter</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">horizontalCenter</span>
</span><span id="__span-49-29"><a id="__codelineno-49-29" name="__codelineno-49-29" href="#__codelineno-49-29"></a><span class="p">}</span>
</span><span id="__span-49-30"><a id="__codelineno-49-30" name="__codelineno-49-30" href="#__codelineno-49-30"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-49-31"><a id="__codelineno-49-31" name="__codelineno-49-31" href="#__codelineno-49-31"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">btn</span>
</span><span id="__span-49-32"><a id="__codelineno-49-32" name="__codelineno-49-32" href="#__codelineno-49-32"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;button&#39;</span>
</span><span id="__span-49-33"><a id="__codelineno-49-33" name="__codelineno-49-33" href="#__codelineno-49-33"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">bottom</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">bottom</span>
</span><span id="__span-49-34"><a id="__codelineno-49-34" name="__codelineno-49-34" href="#__codelineno-49-34"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">horizontalCenter</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span><span class="p">.</span><span class="nx">horizontalCenter</span>
</span><span id="__span-49-35"><a id="__codelineno-49-35" name="__codelineno-49-35" href="#__codelineno-49-35"></a>
</span><span id="__span-49-36"><a id="__codelineno-49-36" name="__codelineno-49-36" href="#__codelineno-49-36"></a><span class="w">    </span><span class="nx">states</span><span class="o">:</span><span class="p">[</span>
</span><span id="__span-49-37"><a id="__codelineno-49-37" name="__codelineno-49-37" href="#__codelineno-49-37"></a><span class="w">        </span><span class="nx">State</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-38"><a id="__codelineno-49-38" name="__codelineno-49-38" href="#__codelineno-49-38"></a><span class="w">        </span><span class="nx">when</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-49-39"><a id="__codelineno-49-39" name="__codelineno-49-39" href="#__codelineno-49-39"></a><span class="w">        </span><span class="nx">PropertyChanges</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-40"><a id="__codelineno-49-40" name="__codelineno-49-40" href="#__codelineno-49-40"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">btn</span>
</span><span id="__span-49-41"><a id="__codelineno-49-41" name="__codelineno-49-41" href="#__codelineno-49-41"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;home&#39;</span>
</span><span id="__span-49-42"><a id="__codelineno-49-42" name="__codelineno-49-42" href="#__codelineno-49-42"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-49-43"><a id="__codelineno-49-43" name="__codelineno-49-43" href="#__codelineno-49-43"></a><span class="p">},</span>
</span><span id="__span-49-44"><a id="__codelineno-49-44" name="__codelineno-49-44" href="#__codelineno-49-44"></a><span class="w">    </span><span class="nx">State</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-45"><a id="__codelineno-49-45" name="__codelineno-49-45" href="#__codelineno-49-45"></a><span class="w">        </span><span class="nx">when</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">1</span>
</span><span id="__span-49-46"><a id="__codelineno-49-46" name="__codelineno-49-46" href="#__codelineno-49-46"></a><span class="w">        </span><span class="nx">PropertyChanges</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-47"><a id="__codelineno-49-47" name="__codelineno-49-47" href="#__codelineno-49-47"></a><span class="w">            </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">btn</span>
</span><span id="__span-49-48"><a id="__codelineno-49-48" name="__codelineno-49-48" href="#__codelineno-49-48"></a><span class="w">            </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;help&#39;</span>
</span><span id="__span-49-49"><a id="__codelineno-49-49" name="__codelineno-49-49" href="#__codelineno-49-49"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-49-50"><a id="__codelineno-49-50" name="__codelineno-49-50" href="#__codelineno-49-50"></a><span class="w">    </span><span class="p">},</span>
</span><span id="__span-49-51"><a id="__codelineno-49-51" name="__codelineno-49-51" href="#__codelineno-49-51"></a><span class="w">        </span><span class="nx">State</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-52"><a id="__codelineno-49-52" name="__codelineno-49-52" href="#__codelineno-49-52"></a><span class="w">            </span><span class="nx">when</span><span class="o">:</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">currentIndex</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">2</span>
</span><span id="__span-49-53"><a id="__codelineno-49-53" name="__codelineno-49-53" href="#__codelineno-49-53"></a><span class="w">            </span><span class="nx">PropertyChanges</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-49-54"><a id="__codelineno-49-54" name="__codelineno-49-54" href="#__codelineno-49-54"></a><span class="w">                </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">btn</span>
</span><span id="__span-49-55"><a id="__codelineno-49-55" name="__codelineno-49-55" href="#__codelineno-49-55"></a><span class="w">                </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;about&#39;</span>
</span><span id="__span-49-56"><a id="__codelineno-49-56" name="__codelineno-49-56" href="#__codelineno-49-56"></a><span class="w">            </span><span class="p">}</span>
</span><span id="__span-49-57"><a id="__codelineno-49-57" name="__codelineno-49-57" href="#__codelineno-49-57"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-49-58"><a id="__codelineno-49-58" name="__codelineno-49-58" href="#__codelineno-49-58"></a><span class="p">]</span>
</span><span id="__span-49-59"><a id="__codelineno-49-59" name="__codelineno-49-59" href="#__codelineno-49-59"></a>
</span><span id="__span-49-60"><a id="__codelineno-49-60" name="__codelineno-49-60" href="#__codelineno-49-60"></a>
</span><span id="__span-49-61"><a id="__codelineno-49-61" name="__codelineno-49-61" href="#__codelineno-49-61"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="84102831"></a></p>
<h2 id="_19">对话框<a class="headerlink" href="#_19" title="Permanent link">&para;</a></h2>
<p>创建一个对话框,注意需要import QtQuick.Dialogs 1.2 as Old</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-50-1"><a id="__codelineno-50-1" name="__codelineno-50-1" href="#__codelineno-50-1"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-50-2"><a id="__codelineno-50-2" name="__codelineno-50-2" href="#__codelineno-50-2"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;click&#39;</span>
</span><span id="__span-50-3"><a id="__codelineno-50-3" name="__codelineno-50-3" href="#__codelineno-50-3"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-50-4"><a id="__codelineno-50-4" name="__codelineno-50-4" href="#__codelineno-50-4"></a><span class="w">        </span><span class="nx">myDialog</span><span class="p">.</span><span class="nx">open</span><span class="p">()</span>
</span><span id="__span-50-5"><a id="__codelineno-50-5" name="__codelineno-50-5" href="#__codelineno-50-5"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-50-6"><a id="__codelineno-50-6" name="__codelineno-50-6" href="#__codelineno-50-6"></a><span class="p">}</span>
</span><span id="__span-50-7"><a id="__codelineno-50-7" name="__codelineno-50-7" href="#__codelineno-50-7"></a>
</span><span id="__span-50-8"><a id="__codelineno-50-8" name="__codelineno-50-8" href="#__codelineno-50-8"></a><span class="nx">Old</span><span class="p">.</span><span class="nx">Dialog</span><span class="p">{</span>
</span><span id="__span-50-9"><a id="__codelineno-50-9" name="__codelineno-50-9" href="#__codelineno-50-9"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">myDialog</span>
</span><span id="__span-50-10"><a id="__codelineno-50-10" name="__codelineno-50-10" href="#__codelineno-50-10"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="Behavior"></a></p>
<h2 id="behavior">Behavior<a class="headerlink" href="#behavior" title="Permanent link">&para;</a></h2>
<p>动画效果，选择需要改变的元素对象，duration，变化时间</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-51-1"><a id="__codelineno-51-1" name="__codelineno-51-1" href="#__codelineno-51-1"></a><span class="nx">Behavior</span><span class="w"> </span><span class="nx">on</span><span class="w"> </span><span class="nx">width</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-51-2"><a id="__codelineno-51-2" name="__codelineno-51-2" href="#__codelineno-51-2"></a><span class="w">    </span><span class="nx">NumberAnimation</span><span class="p">{</span>
</span><span id="__span-51-3"><a id="__codelineno-51-3" name="__codelineno-51-3" href="#__codelineno-51-3"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-51-4"><a id="__codelineno-51-4" name="__codelineno-51-4" href="#__codelineno-51-4"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-51-5"><a id="__codelineno-51-5" name="__codelineno-51-5" href="#__codelineno-51-5"></a><span class="p">}</span>
</span><span id="__span-51-6"><a id="__codelineno-51-6" name="__codelineno-51-6" href="#__codelineno-51-6"></a>
</span><span id="__span-51-7"><a id="__codelineno-51-7" name="__codelineno-51-7" href="#__codelineno-51-7"></a><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-51-8"><a id="__codelineno-51-8" name="__codelineno-51-8" href="#__codelineno-51-8"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-51-9"><a id="__codelineno-51-9" name="__codelineno-51-9" href="#__codelineno-51-9"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-51-10"><a id="__codelineno-51-10" name="__codelineno-51-10" href="#__codelineno-51-10"></a><span class="w">        </span><span class="k">if</span><span class="p">(</span><span class="nx">rect</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">100</span><span class="p">)</span>
</span><span id="__span-51-11"><a id="__codelineno-51-11" name="__codelineno-51-11" href="#__codelineno-51-11"></a><span class="w">        </span><span class="p">{</span>
</span><span id="__span-51-12"><a id="__codelineno-51-12" name="__codelineno-51-12" href="#__codelineno-51-12"></a><span class="w">            </span><span class="nx">rect</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">300</span>
</span><span id="__span-51-13"><a id="__codelineno-51-13" name="__codelineno-51-13" href="#__codelineno-51-13"></a><span class="w">        </span><span class="p">}</span><span class="k">else</span>
</span><span id="__span-51-14"><a id="__codelineno-51-14" name="__codelineno-51-14" href="#__codelineno-51-14"></a><span class="w">        </span><span class="p">{</span>
</span><span id="__span-51-15"><a id="__codelineno-51-15" name="__codelineno-51-15" href="#__codelineno-51-15"></a><span class="w">            </span><span class="nx">rect</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-51-16"><a id="__codelineno-51-16" name="__codelineno-51-16" href="#__codelineno-51-16"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-51-17"><a id="__codelineno-51-17" name="__codelineno-51-17" href="#__codelineno-51-17"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-51-18"><a id="__codelineno-51-18" name="__codelineno-51-18" href="#__codelineno-51-18"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="ebe08230"></a></p>
<h2 id="_20">动画顺序执行和并行<a class="headerlink" href="#_20" title="Permanent link">&para;</a></h2>
<p>顺序执行,组件为SequentialAnimation</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-52-1"><a id="__codelineno-52-1" name="__codelineno-52-1" href="#__codelineno-52-1"></a><span class="nx">SequentialAnimation</span><span class="p">{</span>
</span><span id="__span-52-2"><a id="__codelineno-52-2" name="__codelineno-52-2" href="#__codelineno-52-2"></a><span class="w">    </span><span class="nx">running</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-52-3"><a id="__codelineno-52-3" name="__codelineno-52-3" href="#__codelineno-52-3"></a><span class="w">    </span><span class="nx">loops</span><span class="o">:</span><span class="w"> </span><span class="nx">Animation</span><span class="p">.</span><span class="nx">Infinite</span>
</span><span id="__span-52-4"><a id="__codelineno-52-4" name="__codelineno-52-4" href="#__codelineno-52-4"></a>
</span><span id="__span-52-5"><a id="__codelineno-52-5" name="__codelineno-52-5" href="#__codelineno-52-5"></a><span class="w">    </span><span class="nx">NumberAnimation</span><span class="p">{</span>
</span><span id="__span-52-6"><a id="__codelineno-52-6" name="__codelineno-52-6" href="#__codelineno-52-6"></a><span class="w">        </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;x&#39;</span>
</span><span id="__span-52-7"><a id="__codelineno-52-7" name="__codelineno-52-7" href="#__codelineno-52-7"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-52-8"><a id="__codelineno-52-8" name="__codelineno-52-8" href="#__codelineno-52-8"></a><span class="w">        </span><span class="nx">to</span><span class="o">:</span><span class="w"> </span><span class="mf">300</span>
</span><span id="__span-52-9"><a id="__codelineno-52-9" name="__codelineno-52-9" href="#__codelineno-52-9"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-52-10"><a id="__codelineno-52-10" name="__codelineno-52-10" href="#__codelineno-52-10"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-52-11"><a id="__codelineno-52-11" name="__codelineno-52-11" href="#__codelineno-52-11"></a>
</span><span id="__span-52-12"><a id="__codelineno-52-12" name="__codelineno-52-12" href="#__codelineno-52-12"></a><span class="w">    </span><span class="nx">NumberAnimation</span><span class="p">{</span>
</span><span id="__span-52-13"><a id="__codelineno-52-13" name="__codelineno-52-13" href="#__codelineno-52-13"></a><span class="w">        </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;x&#39;</span>
</span><span id="__span-52-14"><a id="__codelineno-52-14" name="__codelineno-52-14" href="#__codelineno-52-14"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-52-15"><a id="__codelineno-52-15" name="__codelineno-52-15" href="#__codelineno-52-15"></a><span class="w">        </span><span class="nx">to</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-52-16"><a id="__codelineno-52-16" name="__codelineno-52-16" href="#__codelineno-52-16"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-52-17"><a id="__codelineno-52-17" name="__codelineno-52-17" href="#__codelineno-52-17"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-52-18"><a id="__codelineno-52-18" name="__codelineno-52-18" href="#__codelineno-52-18"></a>
</span><span id="__span-52-19"><a id="__codelineno-52-19" name="__codelineno-52-19" href="#__codelineno-52-19"></a><span class="p">}</span>
</span></code></pre></div>
<p>并行执行，两个动画任务将同时执行</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-53-1"><a id="__codelineno-53-1" name="__codelineno-53-1" href="#__codelineno-53-1"></a><span class="nx">ParallelAnimation</span><span class="p">{</span>
</span><span id="__span-53-2"><a id="__codelineno-53-2" name="__codelineno-53-2" href="#__codelineno-53-2"></a><span class="w">    </span><span class="nx">running</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span>
</span><span id="__span-53-3"><a id="__codelineno-53-3" name="__codelineno-53-3" href="#__codelineno-53-3"></a><span class="w">    </span><span class="nx">NumberAnimation</span><span class="p">{</span>
</span><span id="__span-53-4"><a id="__codelineno-53-4" name="__codelineno-53-4" href="#__codelineno-53-4"></a><span class="w">        </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;x&#39;</span>
</span><span id="__span-53-5"><a id="__codelineno-53-5" name="__codelineno-53-5" href="#__codelineno-53-5"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-53-6"><a id="__codelineno-53-6" name="__codelineno-53-6" href="#__codelineno-53-6"></a><span class="w">        </span><span class="nx">to</span><span class="o">:</span><span class="w"> </span><span class="mf">300</span>
</span><span id="__span-53-7"><a id="__codelineno-53-7" name="__codelineno-53-7" href="#__codelineno-53-7"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-53-8"><a id="__codelineno-53-8" name="__codelineno-53-8" href="#__codelineno-53-8"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-53-9"><a id="__codelineno-53-9" name="__codelineno-53-9" href="#__codelineno-53-9"></a><span class="w">    </span><span class="nx">ColorAnimation</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-53-10"><a id="__codelineno-53-10" name="__codelineno-53-10" href="#__codelineno-53-10"></a><span class="w">        </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;color&#39;</span>
</span><span id="__span-53-11"><a id="__codelineno-53-11" name="__codelineno-53-11" href="#__codelineno-53-11"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-53-12"><a id="__codelineno-53-12" name="__codelineno-53-12" href="#__codelineno-53-12"></a><span class="w">        </span><span class="nx">to</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-53-13"><a id="__codelineno-53-13" name="__codelineno-53-13" href="#__codelineno-53-13"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-53-14"><a id="__codelineno-53-14" name="__codelineno-53-14" href="#__codelineno-53-14"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-53-15"><a id="__codelineno-53-15" name="__codelineno-53-15" href="#__codelineno-53-15"></a><span class="p">}</span>
</span></code></pre></div>
<p>使用状态来过渡</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-54-1"><a id="__codelineno-54-1" name="__codelineno-54-1" href="#__codelineno-54-1"></a><span class="nx">transitions</span><span class="o">:</span><span class="w"> </span><span class="nx">Transition</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-54-2"><a id="__codelineno-54-2" name="__codelineno-54-2" href="#__codelineno-54-2"></a><span class="w">    </span><span class="nx">NumberAnimation</span><span class="p">{</span>
</span><span id="__span-54-3"><a id="__codelineno-54-3" name="__codelineno-54-3" href="#__codelineno-54-3"></a><span class="w">        </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;x&#39;</span>
</span><span id="__span-54-4"><a id="__codelineno-54-4" name="__codelineno-54-4" href="#__codelineno-54-4"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-54-5"><a id="__codelineno-54-5" name="__codelineno-54-5" href="#__codelineno-54-5"></a><span class="w">        </span><span class="nx">to</span><span class="o">:</span><span class="w"> </span><span class="mf">300</span>
</span><span id="__span-54-6"><a id="__codelineno-54-6" name="__codelineno-54-6" href="#__codelineno-54-6"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-54-7"><a id="__codelineno-54-7" name="__codelineno-54-7" href="#__codelineno-54-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-54-8"><a id="__codelineno-54-8" name="__codelineno-54-8" href="#__codelineno-54-8"></a><span class="w">    </span><span class="nx">ColorAnimation</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-54-9"><a id="__codelineno-54-9" name="__codelineno-54-9" href="#__codelineno-54-9"></a><span class="w">        </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;color&#39;</span>
</span><span id="__span-54-10"><a id="__codelineno-54-10" name="__codelineno-54-10" href="#__codelineno-54-10"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-54-11"><a id="__codelineno-54-11" name="__codelineno-54-11" href="#__codelineno-54-11"></a><span class="w">        </span><span class="nx">to</span><span class="o">:</span><span class="w"> </span><span class="nx">lqhItem</span><span class="p">.</span><span class="nx">myColorBulider</span><span class="p">()</span>
</span><span id="__span-54-12"><a id="__codelineno-54-12" name="__codelineno-54-12" href="#__codelineno-54-12"></a><span class="w">        </span><span class="nx">duration</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span>
</span><span id="__span-54-13"><a id="__codelineno-54-13" name="__codelineno-54-13" href="#__codelineno-54-13"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-54-14"><a id="__codelineno-54-14" name="__codelineno-54-14" href="#__codelineno-54-14"></a><span class="p">}</span>
</span><span id="__span-54-15"><a id="__codelineno-54-15" name="__codelineno-54-15" href="#__codelineno-54-15"></a><span class="nx">states</span><span class="o">:</span><span class="w"> </span><span class="nx">State</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-54-16"><a id="__codelineno-54-16" name="__codelineno-54-16" href="#__codelineno-54-16"></a><span class="w">    </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;demo&quot;</span>
</span><span id="__span-54-17"><a id="__codelineno-54-17" name="__codelineno-54-17" href="#__codelineno-54-17"></a><span class="w">    </span><span class="nx">PropertyChanges</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-54-18"><a id="__codelineno-54-18" name="__codelineno-54-18" href="#__codelineno-54-18"></a><span class="w">        </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">rect</span>
</span><span id="__span-54-19"><a id="__codelineno-54-19" name="__codelineno-54-19" href="#__codelineno-54-19"></a><span class="w">        </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="mf">300</span>
</span><span id="__span-54-20"><a id="__codelineno-54-20" name="__codelineno-54-20" href="#__codelineno-54-20"></a><span class="w">        </span><span class="nx">color</span><span class="o">:</span><span class="s1">&#39;orange&#39;</span>
</span><span id="__span-54-21"><a id="__codelineno-54-21" name="__codelineno-54-21" href="#__codelineno-54-21"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-54-22"><a id="__codelineno-54-22" name="__codelineno-54-22" href="#__codelineno-54-22"></a><span class="p">}</span>
</span><span id="__span-54-23"><a id="__codelineno-54-23" name="__codelineno-54-23" href="#__codelineno-54-23"></a><span class="nx">MouseArea</span><span class="p">{</span>
</span><span id="__span-54-24"><a id="__codelineno-54-24" name="__codelineno-54-24" href="#__codelineno-54-24"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-54-25"><a id="__codelineno-54-25" name="__codelineno-54-25" href="#__codelineno-54-25"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-54-26"><a id="__codelineno-54-26" name="__codelineno-54-26" href="#__codelineno-54-26"></a><span class="w">        </span><span class="nx">rect</span><span class="p">.</span><span class="nx">state</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rect</span><span class="p">.</span><span class="nx">state</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="o">:</span><span class="s1">&#39;demo&#39;</span>
</span><span id="__span-54-27"><a id="__codelineno-54-27" name="__codelineno-54-27" href="#__codelineno-54-27"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-54-28"><a id="__codelineno-54-28" name="__codelineno-54-28" href="#__codelineno-54-28"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="abb38f5f"></a></p>
<h1 id="qmlcpp">QML和CPP<a class="headerlink" href="#qmlcpp" title="Permanent link">&para;</a></h1>
<p><a name="3999c52b"></a></p>
<h2 id="qmlcpp_1">从QML中获取数据到CPP<a class="headerlink" href="#qmlcpp_1" title="Permanent link">&para;</a></h2>
<p>先在main.qml中定义一个Label控件</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-55-1"><a id="__codelineno-55-1" name="__codelineno-55-1" href="#__codelineno-55-1"></a><span class="nx">Label</span><span class="p">{</span>
</span><span id="__span-55-2"><a id="__codelineno-55-2" name="__codelineno-55-2" href="#__codelineno-55-2"></a><span class="w">    </span><span class="nx">objectName</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;labelTest&#39;</span>
</span><span id="__span-55-3"><a id="__codelineno-55-3" name="__codelineno-55-3" href="#__codelineno-55-3"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;这是一个测试标签&#39;</span>
</span><span id="__span-55-4"><a id="__codelineno-55-4" name="__codelineno-55-4" href="#__codelineno-55-4"></a>
</span><span id="__span-55-5"><a id="__codelineno-55-5" name="__codelineno-55-5" href="#__codelineno-55-5"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">getText</span><span class="p">(</span><span class="nx">info</span><span class="p">){</span>
</span><span id="__span-55-6"><a id="__codelineno-55-6" name="__codelineno-55-6" href="#__codelineno-55-6"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">text</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">info</span>
</span><span id="__span-55-7"><a id="__codelineno-55-7" name="__codelineno-55-7" href="#__codelineno-55-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-55-8"><a id="__codelineno-55-8" name="__codelineno-55-8" href="#__codelineno-55-8"></a><span class="p">}</span>
</span></code></pre></div>
<p>现在想要在cpp文件中调用，注意头文件</p>
<div class="language-c highlight"><pre><span></span><code><span id="__span-56-1"><a id="__codelineno-56-1" name="__codelineno-56-1" href="#__codelineno-56-1"></a><span class="cp">#include</span><span class="w"> </span><span class="cpf">&lt;QMetaObject&gt;</span>
</span><span id="__span-56-2"><a id="__codelineno-56-2" name="__codelineno-56-2" href="#__codelineno-56-2"></a><span class="cp">#include</span><span class="w"> </span><span class="cpf">&lt;QDebug&gt;</span>
</span></code></pre></div>
<div class="language-c highlight"><pre><span></span><code><span id="__span-57-1"><a id="__codelineno-57-1" name="__codelineno-57-1" href="#__codelineno-57-1"></a><span class="c1">//获取所有的对象</span>
</span><span id="__span-57-2"><a id="__codelineno-57-2" name="__codelineno-57-2" href="#__codelineno-57-2"></a><span class="k">auto</span><span class="w"> </span><span class="n">root</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">engine</span><span class="p">.</span><span class="n">rootObjects</span><span class="p">();</span>
</span><span id="__span-57-3"><a id="__codelineno-57-3" name="__codelineno-57-3" href="#__codelineno-57-3"></a><span class="c1">//找到对象中的子对象文件</span>
</span><span id="__span-57-4"><a id="__codelineno-57-4" name="__codelineno-57-4" href="#__codelineno-57-4"></a><span class="k">auto</span><span class="w"> </span><span class="n">myLabelTest</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">root</span><span class="p">.</span><span class="n">first</span><span class="p">()</span><span class="o">-&gt;</span><span class="n">findChild</span><span class="o">&lt;</span><span class="n">QObject</span><span class="o">*&gt;</span><span class="p">(</span><span class="s">&quot;labelTest&quot;</span><span class="p">);</span>
</span><span id="__span-57-5"><a id="__codelineno-57-5" name="__codelineno-57-5" href="#__codelineno-57-5"></a><span class="c1">//定义一个可以获取值的数据类型</span>
</span><span id="__span-57-6"><a id="__codelineno-57-6" name="__codelineno-57-6" href="#__codelineno-57-6"></a><span class="n">QVariant</span><span class="w"> </span><span class="n">ret</span><span class="p">;</span>
</span><span id="__span-57-7"><a id="__codelineno-57-7" name="__codelineno-57-7" href="#__codelineno-57-7"></a><span class="c1">//调用子对象的方法</span>
</span><span id="__span-57-8"><a id="__codelineno-57-8" name="__codelineno-57-8" href="#__codelineno-57-8"></a><span class="n">QMetaObject</span><span class="o">::</span><span class="n">invokeMethod</span><span class="p">(</span><span class="n">myLabelTest</span><span class="p">,</span><span class="s">&quot;getText&quot;</span><span class="p">,</span><span class="n">Q_RETURN_ARG</span><span class="p">(</span><span class="n">QVariant</span><span class="p">,</span><span class="n">ret</span><span class="p">),</span><span class="n">Q_ARG</span><span class="p">(</span><span class="n">QVariant</span><span class="p">,</span><span class="s">&quot;1&quot;</span><span class="p">));</span>
</span><span id="__span-57-9"><a id="__codelineno-57-9" name="__codelineno-57-9" href="#__codelineno-57-9"></a>
</span><span id="__span-57-10"><a id="__codelineno-57-10" name="__codelineno-57-10" href="#__codelineno-57-10"></a><span class="n">qDebug</span><span class="p">()</span><span class="o">&lt;&lt;</span><span class="n">ret</span><span class="p">;</span>
</span></code></pre></div>
<p><a name="a1bb30f0"></a></p>
<h2 id="cppqml">从CPP中注册数据到QML<a class="headerlink" href="#cppqml" title="Permanent link">&para;</a></h2>
<p>上下文注册，Person类似注册的组件名，注意包含头文件</p>
<div class="language-c highlight"><pre><span></span><code><span id="__span-58-1"><a id="__codelineno-58-1" name="__codelineno-58-1" href="#__codelineno-58-1"></a><span class="cp">#include</span><span class="w"> </span><span class="cpf">&lt;QQmlContext&gt;</span>
</span></code></pre></div>
<div class="language-c highlight"><pre><span></span><code><span id="__span-59-1"><a id="__codelineno-59-1" name="__codelineno-59-1" href="#__codelineno-59-1"></a><span class="n">engine</span><span class="p">.</span><span class="n">rootContext</span><span class="p">()</span><span class="o">-&gt;</span><span class="n">setContextProperty</span><span class="p">(</span><span class="s">&quot;Person&quot;</span><span class="p">,</span><span class="o">&amp;</span><span class="n">p1</span><span class="p">);</span><span class="w">  </span>
</span><span id="__span-59-2"><a id="__codelineno-59-2" name="__codelineno-59-2" href="#__codelineno-59-2"></a>
</span><span id="__span-59-3"><a id="__codelineno-59-3" name="__codelineno-59-3" href="#__codelineno-59-3"></a><span class="k">auto</span><span class="w"> </span><span class="n">context</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">engine</span><span class="p">.</span><span class="n">rootContext</span><span class="p">();</span>
</span><span id="__span-59-4"><a id="__codelineno-59-4" name="__codelineno-59-4" href="#__codelineno-59-4"></a><span class="n">context</span><span class="o">-&gt;</span><span class="n">setContextProperty</span><span class="p">(</span><span class="s">&quot;Person&quot;</span><span class="p">,</span><span class="o">&amp;</span><span class="n">p1</span><span class="p">);</span>
</span></code></pre></div>
<p>注册单例文件</p>
<p><a name="054fe748"></a></p>
<h2 id="qmlcpp_2">连接QML的信号和CPP的槽<a class="headerlink" href="#qmlcpp_2" title="Permanent link">&para;</a></h2>
<p>在QML中建立一个Button信号</p>
<p>然后在CPP文件中</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-60-1"><a id="__codelineno-60-1" name="__codelineno-60-1" href="#__codelineno-60-1"></a><span class="c1">//获取所有的对象</span>
</span><span id="__span-60-2"><a id="__codelineno-60-2" name="__codelineno-60-2" href="#__codelineno-60-2"></a><span class="nx">auto</span><span class="w"> </span><span class="nx">root</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">engine</span><span class="p">.</span><span class="nx">rootObjects</span><span class="p">();</span>
</span><span id="__span-60-3"><a id="__codelineno-60-3" name="__codelineno-60-3" href="#__codelineno-60-3"></a><span class="c1">//找到对象中的子对象文件</span>
</span><span id="__span-60-4"><a id="__codelineno-60-4" name="__codelineno-60-4" href="#__codelineno-60-4"></a><span class="nx">auto</span><span class="w"> </span><span class="nx">myButton</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">root</span><span class="p">.</span><span class="nx">first</span><span class="p">()</span><span class="o">-&gt;</span><span class="nx">findChild</span><span class="o">&lt;</span><span class="nx">QObject</span><span class="o">*&gt;</span><span class="p">(</span><span class="s2">&quot;myBtn&quot;</span><span class="p">);</span>
</span><span id="__span-60-5"><a id="__codelineno-60-5" name="__codelineno-60-5" href="#__codelineno-60-5"></a><span class="c1">//连接信号和槽</span>
</span><span id="__span-60-6"><a id="__codelineno-60-6" name="__codelineno-60-6" href="#__codelineno-60-6"></a><span class="nx">QObject</span><span class="o">::</span><span class="nx">connect</span><span class="p">(</span><span class="nx">myButton</span><span class="p">,</span><span class="nx">SIGNAL</span><span class="p">(</span><span class="nx">clicked</span><span class="p">()),</span><span class="o">&amp;</span><span class="nx">p1</span><span class="p">,</span><span class="nx">SLOT</span><span class="p">(</span><span class="nx">clickDemo</span><span class="p">()));</span>
</span></code></pre></div>
<p>在QML中建立信号，然后CPP中接收</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-61-1"><a id="__codelineno-61-1" name="__codelineno-61-1" href="#__codelineno-61-1"></a><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-61-2"><a id="__codelineno-61-2" name="__codelineno-61-2" href="#__codelineno-61-2"></a><span class="w">    </span><span class="nx">property</span><span class="w"> </span><span class="kr">int</span><span class="w"> </span><span class="nx">count</span><span class="o">:</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-61-3"><a id="__codelineno-61-3" name="__codelineno-61-3" href="#__codelineno-61-3"></a><span class="w">    </span><span class="nx">objectName</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;myBtn&#39;</span>
</span><span id="__span-61-4"><a id="__codelineno-61-4" name="__codelineno-61-4" href="#__codelineno-61-4"></a><span class="w">    </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;click&#39;</span>
</span><span id="__span-61-5"><a id="__codelineno-61-5" name="__codelineno-61-5" href="#__codelineno-61-5"></a><span class="w">    </span><span class="nx">signal</span><span class="w"> </span><span class="nx">demo_click</span><span class="p">(</span><span class="kr">int</span><span class="w"> </span><span class="nx">_count</span><span class="p">)</span>
</span><span id="__span-61-6"><a id="__codelineno-61-6" name="__codelineno-61-6" href="#__codelineno-61-6"></a><span class="w">    </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-61-7"><a id="__codelineno-61-7" name="__codelineno-61-7" href="#__codelineno-61-7"></a><span class="w">        </span><span class="nx">count</span><span class="o">++</span>
</span><span id="__span-61-8"><a id="__codelineno-61-8" name="__codelineno-61-8" href="#__codelineno-61-8"></a><span class="w">        </span><span class="k">if</span><span class="p">(</span><span class="nx">count</span><span class="o">&gt;</span><span class="mf">10</span><span class="p">)</span>
</span><span id="__span-61-9"><a id="__codelineno-61-9" name="__codelineno-61-9" href="#__codelineno-61-9"></a><span class="w">        </span><span class="p">{</span>
</span><span id="__span-61-10"><a id="__codelineno-61-10" name="__codelineno-61-10" href="#__codelineno-61-10"></a><span class="w">            </span><span class="nx">demo_click</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span>
</span><span id="__span-61-11"><a id="__codelineno-61-11" name="__codelineno-61-11" href="#__codelineno-61-11"></a><span class="w">            </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span>
</span><span id="__span-61-12"><a id="__codelineno-61-12" name="__codelineno-61-12" href="#__codelineno-61-12"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-61-13"><a id="__codelineno-61-13" name="__codelineno-61-13" href="#__codelineno-61-13"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-61-14"><a id="__codelineno-61-14" name="__codelineno-61-14" href="#__codelineno-61-14"></a><span class="p">}</span>
</span></code></pre></div>
<p>带参数的信号和槽</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-62-1"><a id="__codelineno-62-1" name="__codelineno-62-1" href="#__codelineno-62-1"></a>QObject::connect(myButton,SIGNAL(demo_click(int)),&amp;p1,SLOT(clickCountDemo(int)));
</span></code></pre></div>
<p><a name="7ee9773a"></a></p>
<h2 id="cqml">C++的信号在QML中使用<a class="headerlink" href="#cqml" title="Permanent link">&para;</a></h2>
<p>5.12版本，Person是建立的类型名</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-63-1"><a id="__codelineno-63-1" name="__codelineno-63-1" href="#__codelineno-63-1"></a><span class="nx">Connections</span><span class="p">{</span>
</span><span id="__span-63-2"><a id="__codelineno-63-2" name="__codelineno-63-2" href="#__codelineno-63-2"></a><span class="w">    </span><span class="nx">target</span><span class="o">:</span><span class="w"> </span><span class="nx">Person</span>
</span><span id="__span-63-3"><a id="__codelineno-63-3" name="__codelineno-63-3" href="#__codelineno-63-3"></a><span class="w">    </span><span class="nx">onQmlTest</span><span class="o">:</span><span class="p">{</span>
</span><span id="__span-63-4"><a id="__codelineno-63-4" name="__codelineno-63-4" href="#__codelineno-63-4"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;shidgigd&quot;</span><span class="p">)</span>
</span><span id="__span-63-5"><a id="__codelineno-63-5" name="__codelineno-63-5" href="#__codelineno-63-5"></a><span class="w">        </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">age</span><span class="p">)</span>
</span><span id="__span-63-6"><a id="__codelineno-63-6" name="__codelineno-63-6" href="#__codelineno-63-6"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-63-7"><a id="__codelineno-63-7" name="__codelineno-63-7" href="#__codelineno-63-7"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="3cba486b"></a></p>
<h2 id="qmlc">在QML中注入一个C++类<a class="headerlink" href="#qmlc" title="Permanent link">&para;</a></h2>
<p>先创建一个C++类，记得继承QQuickItem才能嵌套，因为有个描点，Q_PROPERTY是将变量可以在QML中调用，int只能调用32位</p>
<p>在改变时，发送信号</p>
<div class="language-c highlight"><pre><span></span><code><span id="__span-64-1"><a id="__codelineno-64-1" name="__codelineno-64-1" href="#__codelineno-64-1"></a><span class="n">class</span><span class="w"> </span><span class="n">Info</span><span class="o">:</span><span class="w"> </span><span class="n">public</span><span class="w"> </span><span class="n">QObject</span><span class="p">{</span>
</span><span id="__span-64-2"><a id="__codelineno-64-2" name="__codelineno-64-2" href="#__codelineno-64-2"></a><span class="w">    </span><span class="n">Q_OBJECT</span>
</span><span id="__span-64-3"><a id="__codelineno-64-3" name="__codelineno-64-3" href="#__codelineno-64-3"></a><span class="w">    </span><span class="nf">Q_PROPERTY</span><span class="p">(</span><span class="n">QString</span><span class="w"> </span><span class="n">name</span><span class="w"> </span><span class="n">READ</span><span class="w"> </span><span class="n">getName</span><span class="w"> </span><span class="n">WRITE</span><span class="w"> </span><span class="n">setName</span><span class="w"> </span><span class="n">NOTIFY</span><span class="w"> </span><span class="n">nameChanged</span><span class="p">)</span>
</span><span id="__span-64-4"><a id="__codelineno-64-4" name="__codelineno-64-4" href="#__codelineno-64-4"></a><span class="w">    </span><span class="n">Q_PROPERTY</span><span class="p">(</span><span class="n">qint32</span><span class="w"> </span><span class="n">age</span><span class="w">   </span><span class="n">READ</span><span class="w"> </span><span class="n">getAge</span><span class="w">  </span><span class="n">WRITE</span><span class="w"> </span><span class="n">setAge</span><span class="w">  </span><span class="n">NOTIFY</span><span class="w"> </span><span class="n">ageChanged</span><span class="p">)</span>
</span><span id="__span-64-5"><a id="__codelineno-64-5" name="__codelineno-64-5" href="#__codelineno-64-5"></a><span class="n">public</span><span class="o">:</span>
</span><span id="__span-64-6"><a id="__codelineno-64-6" name="__codelineno-64-6" href="#__codelineno-64-6"></a>
</span><span id="__span-64-7"><a id="__codelineno-64-7" name="__codelineno-64-7" href="#__codelineno-64-7"></a><span class="w">    </span><span class="n">Info</span><span class="p">();</span>
</span><span id="__span-64-8"><a id="__codelineno-64-8" name="__codelineno-64-8" href="#__codelineno-64-8"></a><span class="w">    </span><span class="kt">void</span><span class="w"> </span><span class="nf">setName</span><span class="p">(</span><span class="n">QString</span><span class="w"> </span><span class="n">_name</span><span class="p">);</span>
</span><span id="__span-64-9"><a id="__codelineno-64-9" name="__codelineno-64-9" href="#__codelineno-64-9"></a><span class="w">    </span><span class="n">QString</span><span class="w"> </span><span class="nf">getName</span><span class="p">();</span>
</span><span id="__span-64-10"><a id="__codelineno-64-10" name="__codelineno-64-10" href="#__codelineno-64-10"></a><span class="w">    </span><span class="kt">void</span><span class="w"> </span><span class="nf">setAge</span><span class="p">(</span><span class="n">qint32</span><span class="w"> </span><span class="n">_age</span><span class="p">);</span>
</span><span id="__span-64-11"><a id="__codelineno-64-11" name="__codelineno-64-11" href="#__codelineno-64-11"></a><span class="w">    </span><span class="n">qint32</span><span class="w"> </span><span class="nf">getAge</span><span class="p">();</span>
</span><span id="__span-64-12"><a id="__codelineno-64-12" name="__codelineno-64-12" href="#__codelineno-64-12"></a>
</span><span id="__span-64-13"><a id="__codelineno-64-13" name="__codelineno-64-13" href="#__codelineno-64-13"></a><span class="nl">signals</span><span class="p">:</span>
</span><span id="__span-64-14"><a id="__codelineno-64-14" name="__codelineno-64-14" href="#__codelineno-64-14"></a><span class="w">    </span><span class="kt">void</span><span class="w"> </span><span class="nf">nameChanged</span><span class="p">();</span>
</span><span id="__span-64-15"><a id="__codelineno-64-15" name="__codelineno-64-15" href="#__codelineno-64-15"></a><span class="w">    </span><span class="kt">void</span><span class="w"> </span><span class="nf">ageChanged</span><span class="p">();</span>
</span><span id="__span-64-16"><a id="__codelineno-64-16" name="__codelineno-64-16" href="#__codelineno-64-16"></a>
</span><span id="__span-64-17"><a id="__codelineno-64-17" name="__codelineno-64-17" href="#__codelineno-64-17"></a><span class="n">private</span><span class="o">:</span>
</span><span id="__span-64-18"><a id="__codelineno-64-18" name="__codelineno-64-18" href="#__codelineno-64-18"></a><span class="w">    </span><span class="n">QString</span><span class="w"> </span><span class="n">name</span><span class="p">;</span>
</span><span id="__span-64-19"><a id="__codelineno-64-19" name="__codelineno-64-19" href="#__codelineno-64-19"></a><span class="w">    </span><span class="n">qint32</span><span class="w">  </span><span class="n">age</span><span class="p">;</span>
</span><span id="__span-64-20"><a id="__codelineno-64-20" name="__codelineno-64-20" href="#__codelineno-64-20"></a>
</span><span id="__span-64-21"><a id="__codelineno-64-21" name="__codelineno-64-21" href="#__codelineno-64-21"></a><span class="p">};</span>
</span></code></pre></div>
<p>然后注入类型</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-65-1"><a id="__codelineno-65-1" name="__codelineno-65-1" href="#__codelineno-65-1"></a>//import lqhModule 1.0
</span><span id="__span-65-2"><a id="__codelineno-65-2" name="__codelineno-65-2" href="#__codelineno-65-2"></a>qmlRegisterType&lt;Info&gt;(&quot;lqhModule&quot;,1,0,&quot;MyInfo&quot;);
</span></code></pre></div>
<p>然后在QML中建立一个组件,便可以直接使用了</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-66-1"><a id="__codelineno-66-1" name="__codelineno-66-1" href="#__codelineno-66-1"></a><span class="nx">MyInfo</span><span class="p">{</span>
</span><span id="__span-66-2"><a id="__codelineno-66-2" name="__codelineno-66-2" href="#__codelineno-66-2"></a><span class="w">    </span><span class="nx">id</span><span class="o">:</span><span class="nx">firstInfo</span>
</span><span id="__span-66-3"><a id="__codelineno-66-3" name="__codelineno-66-3" href="#__codelineno-66-3"></a><span class="w">    </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;lqh&#39;</span>
</span><span id="__span-66-4"><a id="__codelineno-66-4" name="__codelineno-66-4" href="#__codelineno-66-4"></a><span class="w">    </span><span class="nx">age</span><span class="o">:</span><span class="w"> </span><span class="mf">55</span>
</span><span id="__span-66-5"><a id="__codelineno-66-5" name="__codelineno-66-5" href="#__codelineno-66-5"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="071bd131"></a></p>
<h2 id="64">元数据注入（失败）64<a class="headerlink" href="#64" title="Permanent link">&para;</a></h2>
<p>QML_ELEMENT</p>
<p><a name="f5af2335"></a></p>
<h2 id="65">函数的附加属性(失败）65<a class="headerlink" href="#65" title="Permanent link">&para;</a></h2>
<p>可注册但是不可以有实例信息，可使用附加信息，但是不允许创建</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-67-1"><a id="__codelineno-67-1" name="__codelineno-67-1" href="#__codelineno-67-1"></a>qmlRegisterUncreatableType&lt;person&gt;(&quot;lqhModule&quot;,1,0,&quot;MyInfo&quot;,&quot;lqh:not allowed&quot;);
</span></code></pre></div>
<p><a name="ca79f5e0"></a></p>
<h2 id="api">画家API继承<a class="headerlink" href="#api" title="Permanent link">&para;</a></h2>
<p>paint</p>
<p><a name="f687602e"></a></p>
<h2 id="c-68">C++中创建列表类 68需要重看<a class="headerlink" href="#c-68" title="Permanent link">&para;</a></h2>
<p><a name="Model"></a></p>
<h1 id="model">Model<a class="headerlink" href="#model" title="Permanent link">&para;</a></h1>
<p>c++中建立模型然后QML中调用</p>
<p>如何自建一个listModel和列表项</p>
<p><a name="b7a177ad"></a></p>
<h1 id="web">Web 暂时跳过<a class="headerlink" href="#web" title="Permanent link">&para;</a></h1>
<p><a name="87893286"></a></p>
<h1 id="material">Material样式<a class="headerlink" href="#material" title="Permanent link">&para;</a></h1>
<p>材质包</p>
<p>需要包含</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-68-1"><a id="__codelineno-68-1" name="__codelineno-68-1" href="#__codelineno-68-1"></a>import QtQuick.Controls.Material 2.12
</span></code></pre></div>
<p>在cpp中</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-69-1"><a id="__codelineno-69-1" name="__codelineno-69-1" href="#__codelineno-69-1"></a>#include &lt;QQuickStyle&gt;
</span></code></pre></div>
<p>main函数中</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-70-1"><a id="__codelineno-70-1" name="__codelineno-70-1" href="#__codelineno-70-1"></a>QQuickStyle::setStyle(&quot;Material&quot;);
</span></code></pre></div>
<p>在pro文件中</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-71-1"><a id="__codelineno-71-1" name="__codelineno-71-1" href="#__codelineno-71-1"></a>QT += quick quickcontrols2
</span></code></pre></div>
<p><a name="408598cd"></a></p>
<h1 id="canvas">Canvas元素<a class="headerlink" href="#canvas" title="Permanent link">&para;</a></h1>
<p>自己绘制,requestPaint()是重新画图</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-72-1"><a id="__codelineno-72-1" name="__codelineno-72-1" href="#__codelineno-72-1"></a><span class="nx">Column</span><span class="p">{</span>
</span><span id="__span-72-2"><a id="__codelineno-72-2" name="__codelineno-72-2" href="#__codelineno-72-2"></a><span class="w">    </span><span class="nx">Button</span><span class="p">{</span>
</span><span id="__span-72-3"><a id="__codelineno-72-3" name="__codelineno-72-3" href="#__codelineno-72-3"></a><span class="w">        </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;click&#39;</span>
</span><span id="__span-72-4"><a id="__codelineno-72-4" name="__codelineno-72-4" href="#__codelineno-72-4"></a><span class="w">        </span><span class="nx">onClicked</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-72-5"><a id="__codelineno-72-5" name="__codelineno-72-5" href="#__codelineno-72-5"></a><span class="w">            </span><span class="nx">myCanvas</span><span class="p">.</span><span class="nx">rectColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;green&#39;</span>
</span><span id="__span-72-6"><a id="__codelineno-72-6" name="__codelineno-72-6" href="#__codelineno-72-6"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-72-7"><a id="__codelineno-72-7" name="__codelineno-72-7" href="#__codelineno-72-7"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-72-8"><a id="__codelineno-72-8" name="__codelineno-72-8" href="#__codelineno-72-8"></a><span class="w">    </span><span class="nx">Canvas</span><span class="p">{</span>
</span><span id="__span-72-9"><a id="__codelineno-72-9" name="__codelineno-72-9" href="#__codelineno-72-9"></a><span class="w">        </span><span class="nx">id</span><span class="o">:</span><span class="nx">myCanvas</span>
</span><span id="__span-72-10"><a id="__codelineno-72-10" name="__codelineno-72-10" href="#__codelineno-72-10"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">200</span>
</span><span id="__span-72-11"><a id="__codelineno-72-11" name="__codelineno-72-11" href="#__codelineno-72-11"></a><span class="w">        </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="mf">200</span>
</span><span id="__span-72-12"><a id="__codelineno-72-12" name="__codelineno-72-12" href="#__codelineno-72-12"></a><span class="w">        </span><span class="nx">property</span><span class="w"> </span><span class="nx">color</span><span class="w"> </span><span class="nx">rectColor</span><span class="o">:</span><span class="w"> </span><span class="nx">Qt</span><span class="p">.</span><span class="nx">rgba</span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span>
</span><span id="__span-72-13"><a id="__codelineno-72-13" name="__codelineno-72-13" href="#__codelineno-72-13"></a><span class="w">        </span><span class="nx">onPaint</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-72-14"><a id="__codelineno-72-14" name="__codelineno-72-14" href="#__codelineno-72-14"></a><span class="w">            </span><span class="kd">var</span><span class="w"> </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getContext</span><span class="p">(</span><span class="s2">&quot;2d&quot;</span><span class="p">);</span>
</span><span id="__span-72-15"><a id="__codelineno-72-15" name="__codelineno-72-15" href="#__codelineno-72-15"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">rectColor</span>
</span><span id="__span-72-16"><a id="__codelineno-72-16" name="__codelineno-72-16" href="#__codelineno-72-16"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
</span><span id="__span-72-17"><a id="__codelineno-72-17" name="__codelineno-72-17" href="#__codelineno-72-17"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-72-18"><a id="__codelineno-72-18" name="__codelineno-72-18" href="#__codelineno-72-18"></a><span class="w">        </span><span class="nx">onRectColorChanged</span><span class="o">:</span><span class="p">{</span>
</span><span id="__span-72-19"><a id="__codelineno-72-19" name="__codelineno-72-19" href="#__codelineno-72-19"></a><span class="w">            </span><span class="nx">requestPaint</span><span class="p">()</span>
</span><span id="__span-72-20"><a id="__codelineno-72-20" name="__codelineno-72-20" href="#__codelineno-72-20"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-72-21"><a id="__codelineno-72-21" name="__codelineno-72-21" href="#__codelineno-72-21"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-72-22"><a id="__codelineno-72-22" name="__codelineno-72-22" href="#__codelineno-72-22"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="TableView"></a></p>
<h1 id="tableview">TableView<a class="headerlink" href="#tableview" title="Permanent link">&para;</a></h1>
<p>简单示例,记得包含以下文件</p>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-73-1"><a id="__codelineno-73-1" name="__codelineno-73-1" href="#__codelineno-73-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">QtQuick</span><span class="p">.</span><span class="nx">Controls</span><span class="w"> </span><span class="mf">1.4</span>
</span><span id="__span-73-2"><a id="__codelineno-73-2" name="__codelineno-73-2" href="#__codelineno-73-2"></a><span class="k">import</span><span class="w"> </span><span class="nx">QtQuick</span><span class="p">.</span><span class="nx">Controls</span><span class="p">.</span><span class="nx">Styles</span><span class="w"> </span><span class="mf">1.4</span>
</span></code></pre></div>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-74-1"><a id="__codelineno-74-1" name="__codelineno-74-1" href="#__codelineno-74-1"></a><span class="nx">TableView</span><span class="p">{</span>
</span><span id="__span-74-2"><a id="__codelineno-74-2" name="__codelineno-74-2" href="#__codelineno-74-2"></a><span class="w">    </span><span class="nx">anchors</span><span class="p">.</span><span class="nx">fill</span><span class="o">:</span><span class="w"> </span><span class="nx">parent</span>
</span><span id="__span-74-3"><a id="__codelineno-74-3" name="__codelineno-74-3" href="#__codelineno-74-3"></a><span class="w">    </span><span class="nx">model</span><span class="o">:</span><span class="nx">ListModel</span><span class="p">{</span>
</span><span id="__span-74-4"><a id="__codelineno-74-4" name="__codelineno-74-4" href="#__codelineno-74-4"></a><span class="w">        </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-74-5"><a id="__codelineno-74-5" name="__codelineno-74-5" href="#__codelineno-74-5"></a><span class="w">            </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;shuihu&#39;</span>
</span><span id="__span-74-6"><a id="__codelineno-74-6" name="__codelineno-74-6" href="#__codelineno-74-6"></a><span class="w">            </span><span class="nx">author</span><span class="o">:</span><span class="s1">&#39;lisi&#39;</span>
</span><span id="__span-74-7"><a id="__codelineno-74-7" name="__codelineno-74-7" href="#__codelineno-74-7"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-74-8"><a id="__codelineno-74-8" name="__codelineno-74-8" href="#__codelineno-74-8"></a><span class="w">        </span><span class="nx">ListElement</span><span class="p">{</span>
</span><span id="__span-74-9"><a id="__codelineno-74-9" name="__codelineno-74-9" href="#__codelineno-74-9"></a><span class="w">            </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sanguo&#39;</span>
</span><span id="__span-74-10"><a id="__codelineno-74-10" name="__codelineno-74-10" href="#__codelineno-74-10"></a><span class="w">            </span><span class="nx">author</span><span class="o">:</span><span class="s1">&#39;zhangshan&#39;</span>
</span><span id="__span-74-11"><a id="__codelineno-74-11" name="__codelineno-74-11" href="#__codelineno-74-11"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-74-12"><a id="__codelineno-74-12" name="__codelineno-74-12" href="#__codelineno-74-12"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-74-13"><a id="__codelineno-74-13" name="__codelineno-74-13" href="#__codelineno-74-13"></a>
</span><span id="__span-74-14"><a id="__codelineno-74-14" name="__codelineno-74-14" href="#__codelineno-74-14"></a><span class="w">    </span><span class="nx">TableViewColumn</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-74-15"><a id="__codelineno-74-15" name="__codelineno-74-15" href="#__codelineno-74-15"></a><span class="w">        </span><span class="nx">role</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;title&quot;</span>
</span><span id="__span-74-16"><a id="__codelineno-74-16" name="__codelineno-74-16" href="#__codelineno-74-16"></a><span class="w">        </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Title&quot;</span>
</span><span id="__span-74-17"><a id="__codelineno-74-17" name="__codelineno-74-17" href="#__codelineno-74-17"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span>
</span><span id="__span-74-18"><a id="__codelineno-74-18" name="__codelineno-74-18" href="#__codelineno-74-18"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-74-19"><a id="__codelineno-74-19" name="__codelineno-74-19" href="#__codelineno-74-19"></a><span class="w">    </span><span class="nx">TableViewColumn</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-74-20"><a id="__codelineno-74-20" name="__codelineno-74-20" href="#__codelineno-74-20"></a><span class="w">        </span><span class="nx">role</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;author&quot;</span>
</span><span id="__span-74-21"><a id="__codelineno-74-21" name="__codelineno-74-21" href="#__codelineno-74-21"></a><span class="w">        </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Author&quot;</span>
</span><span id="__span-74-22"><a id="__codelineno-74-22" name="__codelineno-74-22" href="#__codelineno-74-22"></a><span class="w">        </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="mf">200</span>
</span><span id="__span-74-23"><a id="__codelineno-74-23" name="__codelineno-74-23" href="#__codelineno-74-23"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-74-24"><a id="__codelineno-74-24" name="__codelineno-74-24" href="#__codelineno-74-24"></a><span class="w">    </span><span class="nx">style</span><span class="o">:</span><span class="w"> </span><span class="nx">TabViewStyle</span><span class="p">{</span>
</span><span id="__span-74-25"><a id="__codelineno-74-25" name="__codelineno-74-25" href="#__codelineno-74-25"></a><span class="w">        </span><span class="nx">rowDelegate</span><span class="o">:</span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-74-26"><a id="__codelineno-74-26" name="__codelineno-74-26" href="#__codelineno-74-26"></a>
</span><span id="__span-74-27"><a id="__codelineno-74-27" name="__codelineno-74-27" href="#__codelineno-74-27"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-74-28"><a id="__codelineno-74-28" name="__codelineno-74-28" href="#__codelineno-74-28"></a><span class="w">        </span><span class="nx">itemDelegate</span><span class="o">:</span><span class="nx">Rectangle</span><span class="p">{</span>
</span><span id="__span-74-29"><a id="__codelineno-74-29" name="__codelineno-74-29" href="#__codelineno-74-29"></a>
</span><span id="__span-74-30"><a id="__codelineno-74-30" name="__codelineno-74-30" href="#__codelineno-74-30"></a><span class="w">        </span><span class="p">}</span>
</span><span id="__span-74-31"><a id="__codelineno-74-31" name="__codelineno-74-31" href="#__codelineno-74-31"></a><span class="w">    </span><span class="p">}</span>
</span><span id="__span-74-32"><a id="__codelineno-74-32" name="__codelineno-74-32" href="#__codelineno-74-32"></a><span class="p">}</span>
</span></code></pre></div>
<p><a name="0b6bc039"></a></p>
<h1 id="treeview">TreeView （失败）<a class="headerlink" href="#treeview" title="Permanent link">&para;</a></h1>
<p>卡在实例注册</p>
<p><a name="ed351dad"></a></p>
<h1 id="qmake">第三方库涛哥qmake<a class="headerlink" href="#qmake" title="Permanent link">&para;</a></h1>












                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
  回到页面顶部
</button>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2020 - 2025 snqx-lqh
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-social">
  
    
    
    
    
      
      
    
    <a href="https://github.com/snqx-lqh" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
    </a>
  
    
    
    
    
      
      
    
    <a href="https://space.bilibili.com/336653490?spm_id_from=333.1007.0.0" target="_blank" rel="noopener" title="space.bilibili.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79 0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0q13.2 0 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0q13.2 0 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797 0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1m-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8s9.7-14.3 10.1-23.5zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.2 6.3-14 9.5-23.6 9.5s-17.5-3.2-23.6-9.5-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2s13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10m191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2s-14 9.5-23.6 9.5-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2s14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tracking", "navigation.tabs", "navigation.tabs.sticky", "navigation.expand", "navigation.path", "navigation.prune", "navigation.indexes", "navigation.top", "toc.follow", "search.suggest", "search.highlight", "search.share", "announce.dismiss", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.f8cc74c7.min.js", "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}}</script>
    
    
  
      <script src="../../../assets/javascripts/bundle.f1b6f286.min.js"></script>
      
    
  <script src="../../../assets/javascripts/custom.00e08f28.min.js"></script>

  <script id="init-glightbox">const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": true, "openEffect": "zoom", "closeEffect": "zoom", "slideEffect": "slide"});
document$.subscribe(() => { lightbox.reload() });
</script></body>
</html>